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)