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'))
相关推荐
吃饺子不吃馅26 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku15 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu15 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu15 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu15 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu15 小时前
【js篇】call() 与 apply()深度对比
前端·javascript