react学习——14react生命周期图(旧)

1、生命周期图

2、单个组件

javascript 复制代码
 class Demo extends React.Component{
        //构造器
        constructor(props){
            console.log("count--constructor")
            super(props)
            this.state={
                count: 1
            }
        }
        //组件将要挂载
        componentWillMount(){
            console.log("count--componentWillMount")
        }
        //组件挂载完毕
        componentDidMount(){
            console.log("count--componentDidMount")
        }
        //组将将要被卸载
        componentWillUnmount(){
            console.log("count--componentWillUnmount")

        }
        //控制组件更新的阀门
        shouldComponentUpdate(nextProps, nextState, nextContext) {
            console.log("count--shouldComponentUpdate")
            return true
        }
        //组件将要被更新
        componentWillUpdate(nextProps, nextState, nextContext) {
            console.log("count--componentWillUpdate")
        }

        //组件更新完毕
        componentDidUpdate(prevProps, prevState, snapshot) {
            console.log("count--componentDidUpdate")
        }
        death=()=>{
            ReactDOM.unmountComponentAtNode(document.getElementById('root'))
        }
        add=()=>{
            this.setState({
                count:this.state.count+1
            })
        }
        //强制更新
        force=()=>{
            this.forceUpdate()
        }
        // 调用时机:初始化渲染和更新之后
        render(){
            console.log("count--render")
            const {count} = this.state
            return(
                    <div>
                        <h1 >当前求和为:{count}</h1>
                        <button onClick={this.add}>点我加1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何数据中的状态,强制更新一下</button>
                    </div>
            )
        }
    }
ReactDOM.render(<Demo/>,document.getElementById('root'))

3、父子组件

javascript 复制代码
class A extends React.Component{
        state={
            carName:"奔驰"
        }
        changeCarName=()=>{
            this.setState({
                carName:"奔驰c63"
            })
        }
        render(){
            return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCarName}>换车</button>
                        <B carName={this.state.carName}></B>
                    </div>
            )
        }
    }
    //创建子组件
    class B extends React.Component{
        //组件将要被接收到新的属性
        componentWillReceiveProps(nextProps, nextContext) {
            console.log("B----componentWillReceiveProps",nextProps,nextContext)
        }
        shouldComponentUpdate(nextProps, nextState, nextContext) {
            console.log("B----shouldComponentUpdate")
            return true
        }
        componentWillUpdate(nextProps, nextState, nextContext) {
            console.log("B----componentWillUpdate")
        }
        render(){
            console.log("B----render")
            return(
                    <div>
                        我是B组件,接收到的车是:{this.props.carName}
                    </div>
            )
        }
    }
    ReactDOM.render(<A/>,document.getElementById('root'))
相关推荐
wanzhong23331 小时前
ArcGIS学习-20 实战-地形研究
学习
一只小风华~1 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
wanzhong23331 小时前
ArcGIS学习-20 实战-县域水文分析
学习·arcgis
小马学嵌入式~1 小时前
嵌入式 SQLite 数据库开发笔记
linux·c语言·数据库·笔记·sql·学习·sqlite
索迪迈科技1 小时前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法
十碗饭吃不饱1 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.2 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
武文斌772 小时前
arm启动代码总结
arm开发·嵌入式硬件·学习
我怕是好3 小时前
学习stm32 蓝牙
stm32·嵌入式硬件·学习
每天吃饭的羊3 小时前
state和ref
前端·javascript·react.js