One: Component lifecycle (old)
1) Life cycle of the current component
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < 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 > < title > life cycle (old version) < / title > < / head > < body > <div id="box"></div> <script type="text/ Babel "> Class MyComponent extends React.Component{// constructor(constructor) { super(props) this.state = { flag: True} console.log('MyComponent-- constructor')} // Unmount component button event handleUnmount = () => { ReactDOM.unmountComponentAtNode(document.getElementById('box')) console.log('MyComponent---unmountComponentAtNode') } // HandleUpdate = ()=> {let {flag} = this.state this.setState({flag:! HandleForceUpdate = ()=> {this.forceUpdate()} // Component is about to mount componentWillMount() { Console. log('MyComponent-- componentWillMount')} // componentDidMount() { Console. log('MyComponent-- componentDidMount')} The default is true shouldComponentUpdate() {console.log('MyComponent-- shouldComponentUpdate') return false} // The component is about to update ComponentWillUpdate () {console.log('MyComponent-- componnentWillUpdate')} Console. log('MyComponent-- componentDidUpdate')} // render function render() {console.log('MyComponent-- render') const {flag} = this.state return (<div> <h1>state Boolean: {flag? 'true': 'false'}</h1> <button onClick={this.handleUnmount}> Uninstall component </button> <button onClick={this.handleUpdate}> transform </button> <button OnClick ={this.handleForceUpdate}> force update </button> </div>)} console.log('MyComponent---componentWillUnmount') } } let obj = { flag: true } ReactDOM.render(<MyComponent {... obj}/>,document.getElementById('box')) </script> </body> </html>Copy the code
(1) : the current component is hanging
Constructor == “componentWillMount ==” MyComponent– render ==” MyComponent—componentDidMount
(2) : Current component updates
MyComponent- shouldComponentUpdate == “MyComponent- componentWillUpdate ==” MyComponent- render ==” MyComponent—componentDidUpdate
(3) : forcible update of the current component
MyComponent—componnentWillUpdate ==》 MyComponent—render ==》 MyComponent—componentDidUpdate
(4) : current component uninstallation
MyComponent – componentWillUnmount = = “MyComponent – unmountComponentAtNode
2) Consider the life cycle of parent and child components
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < 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 > < title > and components (old version), life cycle. The HTML < / title > </head> <body> <div id="box"></div> <script type="text/ Babel "> // Constructor (props) {super(props) this.state = {flag: true, sendMoney: In 100, } console.log('MyParentComponent-- constructor')} // Unmount the component button event handleUnmount = () => { ReactDOM.unmountComponentAtNode(document.getElementById('box')) Console. log('MyParentComponent-- unmountComponentAtNode')} // Update component button event handleUpdate = ()=> {let {flag,sendMoney} = this.state this.setState({ flag: ! flag, sendMoney: HandleForceUpdate = ()=> {this.forceUpdate()} // componentWillMount() { Console. log('MyParentComponent-- componentWillMount')} // componentDidMount() { Console. log('MyParentComponent-- componentDidMount')} The default is true shouldComponentUpdate() {console.log('MyParentComponent-- shouldComponentUpdate') return true} // The component is about to update ComponentWillUpdate () {console.log('MyParentComponent-- componnentWillUpdate')} Console. log('MyParentComponent-- componentDidUpdate')} // render function render() {console.log('MyParentComponent-- componentDidUpdate') Const {flag} = this.state return (<div> <h1>state Boolean value: {flag? 'true': 'false'}</h1> <button onClick={this.handleUnmount}> Uninstall component </button> <button onClick={this.handleUpdate}> <button onClick={this.handleforceUpdate}> Force update </button> <ChildComponent sendMoney={this.state.sendMoney}/> </div>)}/ / ComponentWillUnmount (){console.log('MyParentComponent-- componentWillUnmount')}} Class ChildComponent extends Constructor (props) {super(props) this.state = {flag: true, sendMoney: In 100, } console.log('ChildComponent-- constructor')} // Unmount component button event handleUnmountChild = () => { ReactDOM.unmountComponentAtNode(document.getElementById('box')) console.log('ChildComponent---unmountComponentAtNode') } HandleUpdate = ()=> {let {flag,sendMoney} = this.state this.setState({flag:! flag, })} / update/component force handleForceUpdate = () = > {enclosing forceUpdate ()} / / component will receive parameters componentWillReceiveProps () { The console. The log (' ChildComponent - componentWillReceiveProps')} / / component is mounted componentWillMount () { Console. log('ChildComponent-- componentWillMount')} // componentDidMount() { Console. log('ChildComponent-- componentDidMount')} The default is true shouldComponentUpdate() {console.log('ChildComponent-- shouldComponentUpdate') return true} // The component is about to update ComponentWillUpdate () {console.log('ChildComponent-- componnentWillUpdate')} Console. log('ChildComponent-- componentDidUpdate')} // render function render() {console.log('ChildComponent-- render') const {flag} = this. State the return (< div > < h1 > = = = = = = I'm subcomponents = = = = < / h1 > < p > dad give money {this. Props. SendMoney} < / p > < h1 > state Boolean value: {flag? 'true': 'false'}</h1> <button onClick={this.handleUnmountChild}> Uninstall component </button> <button onClick={this.handleforceUpdate}> Force update </button> </div>)} console.log('ChildComponent---componentWillUnmount') } } ReactDOM.render(<MyParentComponent />,document.getElementById('box')) </script> </body> </html>Copy the code
(1) Mounting of components
(2) Update of the parent component
MyParentComponent- shouldComponentUpdate == “MyParentComponent- componentWillUpdate ==” MyParentComponent- shouldComponentUpdate == “MyParentComponent- render = = > ChildComponent – componentWillReceiveProps = = “ChildComponent – shouldComponentUpdate = =” ChildComponent– ComponentWillUpdate == “ChildComponent– render ==” “componentDidUpdate ==” MyParentComponent—componentDidUpdate
(3) Mandatory update of the parent component
Two: Component lifecycle (new)
(1) static getDerivedStateFromProps(props,state)
If state depends on props at any time, you can use this hook function and must return either the state object (state) or props, NULL
(2) getSnapshotBeforeUpdate()
Just as its name implies is, before updating the snapshots 】 【 snapshot must return value, or null, if return snapshot value, will be passed on to componentDidUpdate (preProps preState, snapshotValue) hook function, the third parameter is the snapshots of the return value. In this constructor we can get some information before the data is updated,