component是通过自定义的几个函数来控制组件在生命周期中的各个阶段动作（本处所写的state同意指当前组件内部定义的state）
- constructor(props, context)
构造函数，在创建组件的时候调用一次，props为父组件传到子组件中的所有属性集合
- componentWillMount()
在组件加载前执行一次，如果在该处更新state，组件渲染时是读取到的是最新的state。
- componentDidMount()
在组件加载后执行一次，此时组件已渲染过一次，可调用this.refs获取DOM节点
- componentWillReceiveProps(nextProps)
nextProps是父组件传递给子组件的最新props。子组件已加载，父组件发生render的时候子组件就会
调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）
- shouldComponentUpdate(nextProps, nextState)
返回boolean值，默认返回true。nextProps是父组件传递给子组件的最新props，nextState为子组件最新的state。
通过返回true/false来控制子组件是否需要重新渲染。有一些数据的改变并不需要重新渲染，在该处就可以拦截，做优化处理。
- componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用
- componentDidUpdate(preProps, preState)
除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。
- componentWillUnmount()
组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。
触发render方法
在react中，触发render的有4条路径。
以下假设shouldComponentUpdate都是按照默认返回true的方式。
-
首次渲染Initial Render
-
调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
-
父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
-
调用this.forceUpdate
常用语法
- class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
- style={{}} 最外层{}告诉jsx这是js语法，而里面的{}表示样式包裹成对象
- this.props 获取当前组件的props属性对象。
- this.state 获取当前组件的state状态值对象
- this.setState 更新当前组件state状态值对象(使用redux后不建议在组件内使用自身的state)
- this.props.children 获取组件的所有子节点，使用React.Children.map来遍历，从而忽略掉this.props.children返回值的类型
- this.refs.[refName] 获取真实DOM节点，故必须在组件render后调用
<input type="text" ref="myTextInput" />
获取该节点：this.refs.myTextInput;
- PropTypes 用来验证组件的props入参是否符合要求
Index.propTypes = {
value: PropTypes.string.isRequired,
onIncreaseClick: PropTypes.func.isRequired,
onReduceClick: PropTypes.func.isRequired
}
- key 循环输出元素时，用来唯一标识同父同层级的兄弟元素，当React作diff时，只要子元素有key属性，便会去原v-dom树中相应位置（当前横向比较的层级）寻找是否有同key元素，比较它们是否完全相同，若是则复用该元素，免去不必要的操作。故不推荐用数组index来作为key，可用数据对象的某个唯一属性，或是对数据进行hash来生成key。
- 求值表达式 使用{}包起来，在{}中不能直接使用if/for语句，但可以返回值表达式
- 条件判断 使用三元表达式来期待if-else，善用比较运算符“ || ”
- 函数表达式 使用(function(){})()来强制执行函数，返回值
- 注释 {/* 一般注释, 用 {} 包围 */}
React框架把component看作一个状态机，通过改变状态值来控制页面view的输出，其实你可以看成React框架注重数据与DOM的分离，用数据变化来控制DOM的变化，不同于jQuery直接对DOM对象的操作。
- 向react中插入HTML字符串
<div className="place_list" dangerouslySetInnerHTML={{__html: mapPlace()}} onClick={this.handleChooseCity.bind(this)}>
</div>
- 在react的组件中实现路由跳转 this.props.history.push(url)
网友评论