学习React 一段时间了,现在总结下个人对React的认识。
什么是React
React是Facebook推出的一个高效的javascript库,用于构建“可预期的”和“声明式的”Web用户界面,可以用来构建因数据不断变化的大型项目,React 本身只涉及UI层。
React的特点
个人认为React有以下几个特点:
组件化
React可构造多种类型的组件来管理数据状态,构建复杂的UI。
声明式
声明性视图使代码更具可预测性,更易于调试。
响应式
当state数据变化时,React自动响应变化更新视图。
虚拟DOM
React通过构建 "Virtual DOM", 在经过事件循环后计算出虚拟DOM操作前后最小的 diff,再作用到真实的 DOM 上。由 Virtual DOM管理真实DOM的更新。 Vitrual DOM暂不细讲,其中虚拟DOM编译中的过程如下图:
当然,其他人可能认为还有其他的特点,其中虚拟DOM这个特性也不只是React存在,Vue中也有。
React的基本语法
1,
html模板
1.react中使用JSX语法,<script>标签中type属性设置成
text/babel。
2.使用二个核心库react.js 、react-dom.js,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能。
2,
ReactDOM.render
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
3、
JSX语法
遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用JavaScript 规则解析。.
4,
组件component
ES5语法用
React.createClass生成组件
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ES6中推荐使用extends React.Component 创建新的组件方式
class Greeting extends React.Component {}
组件类的第一个字母必须大写,组件类只能包含一个顶层标签,否则也会报错。
5、
this.props.children
this.props 对象的属性与组件的属性一一对应,但 this.props.children 属性它表示组件的所有子节点。this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。
React 提供一个工具方法 React.Children 来处理 this.props.children 。可以React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。
6、
PropTypes 类型检查
- 组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
propTypes
: {
title:
React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
其中,getDefaultProps设置组件的默认属性。
- 高版本react 类型检查管理在prop-types包内
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
//设置类型检查
Greeting.propTypes = {
name: PropTypes.string
};
//设置默认值
Greeting.defaultProps = {
name: 'Stranger'
};
7、
获取真实的DOM节点
使用组件ref属性。html元素增加ref属性,this.refs.[refName]返回真实的DOM节点,获取时应注意是组件mounted之后。这点和Vue的类似。
8、
this.state
将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。
getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。
每次修改以后,自动调用 this.render 方法,再次渲染组件。
9、
表单
表单文本输入框的值不能通过this.props.value获取,而是
通过onChange事件的回调函数,通过event.target,value读取用户输入的值。input,textarea,select,radio元素。
10、
组件的生命周期
组件的生命周期分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,
will 函数在进入状态之前调用,
did 函数在进入状态之后调用,三种状态共计五种处理函数。
- componentWillMount():组件将要插入DOM前钩子函数
- componentDidMount():组件插入DOM后的钩子函数
- componentWillUpdate(object nextProps, object nextState):组件将要更新前钩子函数,其中nextProps是更新的参数,nextState是更新的状态
- componentDidUpdate(object prevProps, object prevState):组件将要更新后钩子函数,其中nextProps是更新后的参数,nextState是更新后的状态
- componentWillUnmount():组件卸载前的钩子函数
此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
参考文献
阮一峰React简单教程:http://www.ruanyifeng.com/blog/2015/03/react.html
React官网:https://reactjs.org/