生命周期 & 表单

最新推荐文章于 2024-01-08 11:28:28 发布

cherry.....

最新推荐文章于 2024-01-08 11:28:28 发布

阅读量750

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_38660873/article/details/88565668

版权

react 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

生命周期

constructor是组件第一个生命周期，该周期是组件（构造函数）实例化的时候，获取props和state或者执行一些初始化函数的一个周期

该周期就是我作为一个组件，我演员拿剧本（props）和化妆（state），准备最好的状态去登场

ES5是用getDefaultProps()和getInitialState这两个来表述该生命周期

ES6是用constructor来表述该状态

constructor(props){
    super(props)
    // 父传子 老爸给我的
    this.props = props;
    // 自己拥有的 就是vue组件里面data  Model
    this.state = {
        "title":"微信"
    };
}

componentWillMount就是演员要登场了，导演给你的剧本（props）是不能变得，能变得是的你展示给观众（view）的状态（state）

这个状态告诉我们两点，演员登场前可以在这里改变自己状态，该演员也只能登场一次,我们一般在该生命周期里面更改state但不要更改props

// 登场前
componentWillMount(){
    this.setState({
        "title":"支付宝"
    })
}

render

演员排练的时候

组件必须的，组件的内容必须依赖该周期呈现

其实就是用数据配合html构造虚拟的DOM，因为操作虚拟DOM性能比较高，我会构造虚拟DOM去操作，等待下一步的挂载，将虚拟DOM挂到真实DOM节点上

render() {
    return (<div>
        {this.state.title}
    </div>);
}

componentDidMount

演员登场的时候

这一步把刚才准备好的虚拟DOM挂载到真实DOM上面,你如果想去操作真实DOM结构，必须在这一个周期之后去操作，ajax请求一般放在这个地方，其实这个生命周是整个组件最稳定的周期

componentDidMount(){
                
}

componentWillReceivePorps这是接受新的props时候调用

shouldComponentUpdate优化性能的一环,可以自己编写一些条件，如果该周期返回true就会更新数据模型，如果返回false就停止更新

// 只要props和state变化，该生命周期必定触发
shouldComponentUpdate(){
    if(this.state.inputValue.length>5){
        return true
    }else{
        return false
    }
}

componentWillUpdate 相当于vue中的beforeUpdate
componentDidUpdate 相当于vue中的updated

componentWillUnmount 相当于vue中的destoryed销毁了
以下两个可以触发销毁阶段

vue-router   /react-router
v-if         /函数式编程实现v-if,来让组件从节点出现或者销毁

React有哪些生命周期
和vue生命周期的区别 (vue是有编译前和后，但是react，它从挂载前和后开始的，但也有vue没有的生命周期componentWillReceivePorps和shouldComponentUpdate)
react怎么实现表表单功能

v-model (vue) = onchange + setState (react)

什么是虚拟DOM，好处是什么（性能，优化）操作虚拟DOM是高效，但是操作真实DOM节点比较高昂

生命周期	Vue	React	描述
编译前	beforeCreate	-	数据和虚拟DOM和真实DOM都没有
编译后	created	constructor	有数据
挂载前	beforeMount	componentWillMount	有数据，有虚拟DOM，但没挂载
挂载后	mounted	componentDidMount	有数据，有虚拟DOM，有挂载
更新前	beforeUpdate	componentWillUpdate	更新数据，并且更新了虚拟DOM，但没挂载
更新后	updated	componentDidUpdate	真实DOM更新了
销毁前	beforeDestory	-	虚拟DOM销毁了，但真实DOM没销毁
销毁后	destoryed	componentWillUnmount	真实DOM销毁了
	-	shouldComponentUpdate	组件只要更新，就会触发这个生命周期，return 布尔值，为真DOM更新，否则不更新

生命周期：https://www.cnblogs.com/qiaojie/p/6135180.html

虚拟DOM

页面展示展示的内容真实DOM,真的在浏览器存在的DOM就是真实DOM

虚拟DOM不在浏览器存在的DOM就是虚拟DOM

$.ajax().done((data)=>{
    // 把后端给的数据渲染到DOM结构上
    // render
    var html = data.arr.map((item)=>{
        return `
            <li>${item}</li>
        `
    }).join("");
    // 在挂载前我需要有一个html结构，但是该html结构是我用JS解析之后存到变量里面的，html就是虚拟的DOM，挂载前有数据，有虚拟DOM，而虚拟DOM其实用JS配合数据生成的
    // JS修改变量成本低廉，但是如果操作DOM成本昂贵吗,性能低效
    // 挂载前
    $("ul").html(html);
    // 挂载后
    // componentDidMount
})