React生命周期函数深入全面介绍_React_

constructor(props) { // 如果你在定义组件中有定义构造函数，则一定要调用super方法来调用父类的构造函数 super(props) // todo … } 

state = { num: 0 }; render() { return 
当前的num是{this.state.num}
; } // 从props中获取数据，绑定到当前的这个组件中的state // nextProps 父组件传递过来的整个props对象，即当前最新的props数据 // prevState 当前组件中的状态对象state，即当前最新的state数据,但暂时不包含返回值中要对state修改的值 static getDerivedStateFromProps(nextProps, prevState) { // 不需要更新当前state return null }

import React, { Component } from 'react' class Child extends Component { constructor(props) { super(props) this.state = { num: 100 } console.log('child --- constructor') } // 快捷输入 gdsfp static getDerivedStateFromProps(nextProps, nextState) { console.log('child --- getDerivedStateFromProps') // nextState: 当前最新的state数据,暂时不包含你返回值中要对state修改的值 console.log(nextProps, nextState) return { name: '张三' } } render() { return ( 
Child组件
 ) } } class App extends Component { constructor(props) { super(props) this.state = { age: 1 } // 父组件先执行后子组件执行此方法 app -> child console.log('App --- constructor') } static getDerivedStateFromProps(nextProps, nextState) { console.log('App --- getDerivedStateFromProps') return null } render() { return ( 
 ) } } export default App

import React, { Component } from 'react' class Child extends Component { constructor(props) { super(props) this.state = { name: '张三' } } // 快捷输入 gdsfp static getDerivedStateFromProps(nextProps, nextState) { console.log('child --- getDerivedStateFromProps') // 如果你想用此方法,把props中的属性数据,追加到state中,后续能修改,则这样的操作,你要确保只执行1次 // 这种方式只能接收到父组件第一次值过来的值（10），点击按钮子组件age并不会增加 // 这是因为每次点击增加按钮都会触发当前函数，将state中的age修改为nextProps // return nextProps // 这种方式不会触发点击按钮增加age值 if (nextState.flag != 1) { return { ...nextProps, flag: 1 } } return null } render() { let { age } = this.state return ( 
Child组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++age++ 
 ) } } class App extends Component { constructor(props) { super(props) this.state = { age: 1 } } render() { return ( 
 ) } } export default App

import React, { Component } from 'react' class Child extends Component { constructor(props) { super(props) this.state = { name: '张三' } console.log('child --- constructor') } // 快捷输入 gdsfp static getDerivedStateFromProps(nextProps, nextState) { console.log('child --- getDerivedStateFromProps') if (nextState.flag != 1) { return { ...nextProps, flag: 1 } } return null } // 它只执行1次 // 虚拟dom挂载到真实的页面点中完成,在此进行dom操作 // 在此可以进行网络请求 componentDidMount() { console.log('child -- componentDidMount') } // ------------- 更新时 // prevProps 修改之前的props数据 // prevState 修改之前的state数据 // 此方法要有一个返回值,且如果有此方法,则必须要有componentDidUpdate // 此方法的返回值,会在componentDidUpdate参数3中接受 getSnapshotBeforeUpdate(prevProps, prevState) { console.log('child --- getSnapshotBeforeUpdate') return 100 } // 数据更新完毕后执行 componentDidUpdate(prevProps, prevState, snapshot) { console.log('child --- componentDidUpdate', snapshot) } render() { console.log('child -- render') let { age } = this.state return ( 
Child组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++ Child -- age ++ 
 ) } } class App extends Component { constructor(props) { super(props) this.state = { age: 1 } console.log('App --- constructor') } static getDerivedStateFromProps(nextProps, nextState) { console.log('App --- getDerivedStateFromProps') return null } componentDidMount() { console.log('App -- componentDidMount') } getSnapshotBeforeUpdate(prevProps, prevState) { console.log('App --- getSnapshotBeforeUpdate') return 200 } // 数据更新完毕后执行 componentDidUpdate(prevProps, prevState, snapshot) { console.log('App --- componentDidUpdate', snapshot) } render() { let { age } = this.state console.log('App -- render') return ( 
App组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++ App -- age ++ 
 ) } } export default App

import React, { Component } from 'react' class Child extends Component { constructor(props) { super(props) this.state = { name: '张三' } } // 快捷输入 gdsfp static getDerivedStateFromProps(nextProps, nextState) { if (nextState.flag != 1) { return { ...nextProps, flag: 1 } } return null } // 销毁组件时执行 componentWillUnmount() { console.log('child --- componentWillUnmount') } render() { let { age } = this.state return ( 
Child组件 -- {age}
 { this.setState(state => ({ age: state.age + 1 })) }} > ++ Child -- age ++ 
 ) } } class App extends Component { constructor(props) { super(props) this.state = { age: 1 } } getSnapshotBeforeUpdate(prevProps, prevState) { console.log('App --- getSnapshotBeforeUpdate') return 200 } // 数据更新完毕后执行 componentDidUpdate(prevProps, prevState, snapshot) { console.log('App --- componentDidUpdate', snapshot) } render() { let { age } = this.state return ( 
App组件 -- {age}
 {/* age大于1时销毁子组件 */} {age > 1 ? null : }  { this.setState(state => ({ age: state.age + 1 })) }} > ++ App -- age ++ 
 ) } } export default App

shouldComponentUpdate(nextProps, nextState) { // 判断是否需要被渲染，如果需要则返回true，否则返回false if (nextProps.b === this.props.b
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：Javascript中replace方法与正则表达式的结合使用教程_javascript技巧_
                                                                
下一篇：React受控组件与非受控组件详细介绍_React_