React 组件生命周期

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class Button extends React.Component {
  constructor(props) {
      super(props);
      this.state = {data: 0};
      this.setNewNumber = this.setNewNumber.bind(this);
  }
  
  setNewNumber() {
    this.setState({data: this.state.data + 1})
  }
  render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
}


class Content extends React.Component {

  componentWillMount() {
	/* 
		在渲染前调用,在客户端也在服务端。
		更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。
		ReactDOM.findDOMNode(this.refs.hs) => null
	*/
      console.log('componentWillMount', ReactDOM.findDOMNode(this.refs.hs))
  }
  
  
  componentDidMount() {
  	/*
		组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
		this.getDOMNode() yichule
		ReactDOM.findDOMNode(this.refs.hs) => h3
	*/
       console.log('componentDidMount', ReactDOM.findDOMNode(this.refs.hs))
  }
  
  
  componentWillReceiveProps(newProps) {
  	/*
		在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
		gerenlijie:vue de watch
	*/
        console.log('componentWillReceiveProps', newProps)
  }
  
  
  shouldComponentUpdate(newProps, newState) {
  	/*
		1.主要用于性能优化(部分更新)
		2.唯一用于控制组件重新渲染的生命周期,
		  由于在react中,setState以后,state发生变化,
		  组件会进入重新渲染的流程,在这里return false可以阻止组件的更新
		3.因为react父组件的重新渲染会导致其所有子组件的重新渲染,
		  这个时候其实我们是不需要所有子组件都跟着重新渲染的,
		  因此需要在子组件的该生命周期中做判断
	*/
		console.log('shouldComponentUpdate', newProps, newState)
        return true;
  }
  
  
  componentWillUpdate(nextProps, nextState) {
  	/*
		shouldComponentUpdate返回true以后,组件进入重新渲染的流程
		还没有render
	*/
        console.log('componentWillUpdate', nextProps, nextState);
  }
  
  
  componentDidUpdate(prevProps, prevState) {
  	/*
		组件完成更新后立即调用
		只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期
	*/
        console.log('componentDidUpdate')
  }
  
  
  componentWillUnmount() {
         console.log('componentWillUnmount')
  }
  
 
    render() {
		/*
			render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,
			在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,
			比较以后,找到最小的有差异的DOM节点,并重新渲染。
		*/
      return (
        <div>
          <h3 ref='hs'>{this.props.myNumber}</h3>
        </div>
      );
    }
}
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);
</script>

</body>
</html>