React组件生命周期中的相关函数(记录/收藏)

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)