React 备忘录 v16

英文原版

模块 react

render

// 重新绘制组件的元素树
render() {
  return <div />;// 返回一棵组件树,也可是一个Fragment,或者一个数组
}

constructor

// 1. 对父组件设置给自己的属性，通过该方法的参数props来接收
// 2. 该方法内如果要调用super(...),它必须是该方法体内第一句
// 3. 如果要初始化当前实例的状态state，建议在这里做,而且方法是 this.state={...}而不是 this.setState(...)
constructor(props) {
  super(props);
  this.state = {
    list: props.initialList
  };
}

// where props aren't used in constructor
// 不使用属性的情况
constructor() {
  super();
  this.state = {
    list: []
  };
}

componentWillMount

componentWillMount() {
  // invoked once. 组件生命周期内只被调用一次，在首次 render 之前会被调用
  // fires before initial 'render'
}

componentDidMount

componentDidMount() {
    // 适合做一些网络请求工作，类似 AJAX,Fetch 或者一些订阅。
    // good for AJAX: fetch, ajax, or subscriptions.

   // 组件生命周期内只被调用一次，在首次 render 之前会被调用       
  // invoked once (client-side only).
  // fires before initial 'render'
}

componentWillReceiveProps

componentWillReceiveProps(nextProps) {
   // 在组件实例每次接收到新的属性时会被调用，在组件实例首次render之前不会被调用，
  // invoked every time component recieves new props.
  // does not before initial 'render'

  // 举例讲解该生命周期方法的调用时机: 
  // Form中有一个Button,在Form实例构造时也构造了Button实例，然后该Form实例中状态发生了变化，从而引起
  // 该Button实例并不需要被销毁重新构造的情况下需要被重新渲染，此时Form实例就会向该Button实例传递变化了
  // 的属性值，这时候该Button实例上的该生命周期方法componentWillReceiveProps就会被调用。
}

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  // 在每次 update 之前被调用，无论该 update 是因为新属性引起的还是新状态引起的，
  // invoked before every update (new props or state).
  // 缺省总是返回 true， 开发人员可以根据情况返回false
  // 如果返回 false, 本次update阶段的 componentWillUpdate, render,componentDidUpdate回调会被忽略
  // 在初始化期间的render之前不会被调用
  // does not fire before initial 'render'.
}

componentWillUpdate

componentWillUpdate(nextProps, nextState) {
  // 紧贴着 属性或者状态引起的render方法在其之前被调用
  // invoked immediately before update (new props or state).
  // 在初始化期间的render之前不会被调用
  // does not fire before initial 'render'.

  // (see componentWillReceiveProps if you need to call setState)
}

注意 : 别在这里调用 setState

componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  // 在DOM更新之后，也就是render之后立即被调用
  // invoked immediately after DOM updates
  // 在初始化期间的render之后不会被调用
  // does not fire after initial 'render'
}

componentWillUnmount

componentWillUnmount() {
  // 紧挨着一个组件的卸载在其之前被调用
  // invoked immediately before a component is unmounted.
}

setState (function)

// good for state transitions

this.setState((prevState, props) => {
  return {count: prevState.count + props.step};
});

setState (object)

// good for static values

this.setState({mykey: 'my new value'});

setState (optional callback)

// fires after setState
// prefer componentDidUpdate

this.setState(
  (prevState, props) => ({ count: prevState.count + props.step }),
  () => console.log(this.state.count)
);

forceUpdate

// forces a re-render; AVOID if possible
// 强制发生一次重新渲染，尽量不要这么使用

this.forceUpdate();

displayName

displayName: "MyComponent"

defaultProps

class Greeting extends React.Component {
      render() {
        return <h1>Hi {this.props.name}</h1>
      }
    }

    CustomButton.defaultProps = {
      name: 'guest'
    };