React中生命周期的示例分析

发布时间:2021-08-11 13:44:26 作者:小新
来源:亿速云 阅读:91

这篇文章将为大家详细讲解有关React中生命周期的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

React的生命周期

两张图带你理解 React的生命周期

React的生命周期(旧)

React中生命周期的示例分析

class Life extends React.Component{
      // 构造器
      constructor(props){
        console.log('Life构造器---constructor');
        super(props)
        this.state={num:0}
      }
      // 计算+1功能
      add=()=>{
        const {num} = this.state
        this.setState({num:num+1})
      }
      // 删除组件
      death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      force=()=>{
        this.forceUpdate()
      }
      // 将要挂载
      componentWillMount(){
        console.log('Life将要挂载---componentWillMount');
      }
      // 已经挂载
      componentDidMount(){
        console.log('Life已经挂载---componentDidMount');
      }
      // 删除触发
      componentWillUnmount(){
        console.log('Life删除触发---componentWillUnmount');
      }
      // 是否应该改变数据
      shouldComponentUpdate(){
        console.log('Life是否改变数据---shouldComponentUpdate');
        return true
      }
      // 将要改变数据
      componentWillUpdate(){
        console.log('Life将要改变数据---componentWillUpdate');
      }
      // 改变数据
      componentDidUpdate(){
        console.log('Life改变数据---componentDidUpdate');
      }
      render(){
        console.log('Life---render');
        const {num} = this.state
        return(
          <div>
          <h2>计数器:{num}</h2> 
          <button onClick={this.add}>点我+1</button> 
          <button onClick={this.death}>删除</button> 
          <button onClick={this.force}>不更改任何状态的数据,强制更新</button> 
          </div>
        )
      }
    }
    // 渲染页面
    ReactDOM.render(<Life />, document.getElementById('text'))

挂载步骤

React中生命周期的示例分析

更新步骤

React中生命周期的示例分析

删除

React中生命周期的示例分析

总结: 初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor() ---构造器
2. componentWillMount() ---将要挂载
3. render() ---render
4. componentDidMount() ---挂载时更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. shouldComponentUpdate() ---是否要进行更改数据
2. componentWillUpdate() ---将要更新数据
3. render()
4. componentDidUpdate() ---更新数据卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() ---卸载

React的生命周期(新)

React中生命周期的示例分析

生命周期的三个阶段(新)

初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()

重要的勾子

1.render:初始化渲染或更新渲染调用
2.componentDidMount:开启监听, 发送ajax请求
3.componentWillUnmount:做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate

现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。

关于“React中生命周期的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. react的示例分析
  2. React中this绑定的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react

上一篇:Javascript基之js面向对象的示例分析

下一篇:Dreamweaver中怎么实现可拖动表格效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》