getDerivedStateFromProps

React@16.4 getDerivedStateFromProps

getDerivedStateFromProps内部不可以有副作用，因为现在是无论是state改变还是props改变，

都会执行它。

例如：

这种写法会导致多次循环渲染直到报错

class App extends Component {
  constructor(props){
    super(props)
    this.myFetch=this.myFetch.bind(this)
    this.state = {
      name: "",
      list: null,
      myFetch:this.myFetch
    };
  }

static getDerivedStateFromProps(props, state) {
    if ( props.name !== state.name ) {
      // 这一句是有副作用的，它会改变state状态，
      // 然后再次调用getDerivedStateFromProps，再次改变state状态...
      state.myFetch(props.name)
      return {
        name: props.name
      };
    }
    return null;
  }
  myFetch(){
      this.setState({
        list: "newList"
      })
  }
  render() {
    return (
      <div>{this.state.list}</div>
    );
  }
}

以上正确写法应为：

class App extends Component {
  constructor(props){
    super(props)
    this.myFetch=this.myFetch.bind(this)
    this.state = {
      name: "",
      list: null,
      //myFetch:this.myFetch
    };
  }

  // 纯函数，无副作用
  static getDerivedStateFromProps(props, state) {
    if ( props.name !== state.name ) {
      return {
        name: props.name,
        list: null
      };
    }
    return null;
  }
  componentDidUpdate(){
    if(!this.state.list){
      this.myFetch(this.props.name)
    }
  }

  // 看是否需要初始化的时候调用
  componentDidMount(){
    this.myFetch(this.props.name)
  }

  myFetch(){
    this.setState({
      list: "newList"
    })
  }
  render() {
    return (
      <div>{this.state.list}</div>
    );
  }
}