总结-旧生命周期

初始化阶段: 由ReactDOM.render()触发---初次渲染

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() ===> 常用
   一般在这个钩子中做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息

更新阶段: 由组件内部this.setState()或父组件render触发

1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() ===> 常用
4. componentDidUpdate()

卸载组件: ReactDOM.unmountComponentAtNode()触发

组件挂载流程

1. componentWillUnmount() ===> 常用
   一般在这个钩子中做一些收尾的事,例如:关闭定时器,取消订阅消息

    class Count extends React.Component {             // 最先调用             constructor(props) {                 super(props);                 console.log('count---constructor');                 this.state = { count: 0 }             }              // 组件将要挂载             //WARNING! To be deprecated in React v17. Use componentDidMount instead.             componentWillMount() {                 console.log('count---componentWillMount');             }              // 组件挂载完毕的钩子             componentDidMount() {                 console.log('count---componentDidMount')             }              componentWillUnmount() {                 console.log('count---componentWillUnmount');             }              // 控制更新阀门             shouldComponentUpdate(nextProps, nextState) {                 console.log('count---shouldComponentUpdate');                 return true;             }             // 组件将要更新的钩子             //WARNING! To be deprecated in React v17. Use componentDidUpdate instead.             componentWillUpdate(nextProps, nextState) {                 console.log('count---componentWillUpdate')             }             // 组件更新之后             componentDidUpdate(prevProps, prevState) {                 console.log('count---componentDidUpdate');             }              add = () => {                 let { count } = this.state;                 count += 1;                 this.setState({ count: count });             }             unload = () => {                 root.unmount(document.getElementById('test'));             }              // 初始化渲染,状态更新之后 执行             render() {                 const { count } = this.state;                 console.log('count---render');                 return (                     <div>                         <h2>当前求和为: {count}</h2>                         <button onClick={this.add}>点我加一</button>                         <button onClick={this.unload}>卸载组件</button>                     </div>                 )             }         } 

父组件render流程

      class A extends React.Component {             constructor(props) {                 super(props);                 this.state = { carName: '奔驰' };             }             changeCar = () => {                 this.setState({ carName: '宝马' });             }             render() {                 return (                     <div>                         <h1>A</h1>                         <button onClick={this.changeCar}>换车</button>                         <B carName={this.state.carName} />                     </div>                 )             }         }          class B extends React.Component {             // 组件将要接收到新的props的钩子             //WARNING! To be deprecated in React v17.             //  Use new lifecycle static getDerivedStateFromProps instead.             componentWillReceiveProps(props) {                 console.log('count---componentWillReceiveProps', props)             }             render() {                 return (                     <div>                         <h1>B</h1>                         <h2>现在的车: {this.props.carName}</h2>                     </div>                 )             }         } 

新生命周期

class Count extends React.Component {              // 最先调用             constructor(props) {                 super(props);                 console.log('count---constructor');                 this.state = { count: 0 }             }              // 使用场景极其罕见,state值取决于props             static getDerivedStateFromProps(props, state) {                 console.log('getDerivedStateFromProps', props, state);                 return null;             }              // 在最近一次渲染之前调用,传值给DidUpdate             getSnapshotBeforeUpdate = (prevProps, prevState) => {                 console.log('getSnapshotBeforeUpdate');                 return 'nihao';             }              // 组件挂载完毕的钩子             componentDidMount() {                 console.log('count---componentDidMount')             }              componentWillUnmount() {                 console.log('count---componentWillUnmount');             }              // 控制更新阀门             shouldComponentUpdate(nextProps, nextState) {                 console.log('count---shouldComponentUpdate');                 return true;             }             // 组件更新之后             componentDidUpdate(prevProps, prevState, snapshotValue) {                 console.log('count---componentDidUpdate', snapshotValue);             }              add = () => {                 let { count } = this.state;                 count += 1;                 this.setState({ count: count });             }             unload = () => {                 root.unmount(document.getElementById('test'));             }              // 初始化渲染,状态更新之后 执行             render() {                 const { count } = this.state;                 console.log('count---render');                 return (                     <div>                         <h2>当前求和为: {count}</h2>                         <button onClick={this.add}>点我加一</button>                         <button onClick={this.unload}>卸载组件</button>                     </div>                 )             }         }