总结-旧生命周期

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

constructor() componentWillMount() render() componentDidMount() ===> 常用

一般在这个钩子中做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息

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

shouldComponentUpdate() componentWillUpdate() render() ===> 常用 componentDidUpdate()

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

组件挂载流程

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> ) } }