一. 总览
二. 相关函数
getDefaultProps()
描述:设定默认的属性值。只在 React.createClass 方式创建的组件中有效,extends React.Component 方式创建的组件中设置静态属性defaultProps: static defaultProps = {…} 来代替。
使用场景:设定组件的默认属性值。
getInitialState()
描述:设置默认的状态值。只在 React.createClass 方式创建的组件中有效,extends React.Component 方式创建的组件中 可以在 构造函数 中通过 this.state = {…} 设置 状态值。或者 直接在class中 state = {…} 设置实例属性state 即可。
使用场景:设定组件状态
constructor(props, context)
描述:构造函数,只会在组件初始化时候调用一次。
使用场景:设定组件状态。
注意:
- 使用时需要调用 super(props)
- 设置状态直接this.state即可,不要使用setState()
- 构造函数可以省略 4. 构造函数中可以获取到props,也就是说可以根据props来设置state。
void componentWillMount()
描述:在组建第一次渲染前调用一次。
使用场景:基本不会用到。官方文档中推荐使用构造函数来代替。
void componentDidMount()
描述:在组建第一次渲染后调用一次。由于组件已经渲染,可以获取到refs。
使用场景:AJAX 初始化数据并设置状态、subscriptions 监听数据
注意:
- 设置了 subscriptions 监听后,需要在 componentWillUnmount 中解除监听
void componentWillReceiveProps(nextProps)
描述:props是父组件传递给子组件的,父组件刷新时会调用(不管props有没有更新,也不管父子组件之间有没有数据交换)
使用场景:在属性更新时,通过setState()重新设置子组件的state
注意:不管props有没有更新,也不管父子组件之间有没有数据交换,只要父组件刷新,子组件就会调用该方法。因此在使用时需要比较当前的props和nextProps,看是否有变化。
bool shouldComponentUpdate(nextProps, nextState)
描述:组件挂载之后,每次调用setState()或父组件更新后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。
使用场景:在比较复杂的应用里,有一些数据的改变并不影响界面展示,可以在这里做判断,优化渲染效率。
注意:通过继承 React.PureComponent 可以自动进行比较,如果state和props都没有变化则不会重新渲染(只做了一层对象比较)。
void componentWillUpdate(nextProps, nextState)
描述:shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate会被调用
使用场景:使用情况比较少。
void componentDidUpdate()
描述:除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate
使用场景:组件更新后需要AJAX初始化数据
ReactElement render()
描述:渲染组件
void componentWillUnmount()
描述:组件被卸载的时候调用。
使用场景:在componentDidMount里面注册的事件需要在这里删除。
三. 组件更新路径
参考资料: