美文网首页
react 的生命周期

react 的生命周期

作者: 中二少爷 | 来源:发表于2018-05-30 11:31 被阅读0次

//constructor 参数有两个 props context 可以获取到父组件传下来的props context 一定要写super()函数

  constructor(props) {

    // 只要组件存在 constructor 就必须要写super 否则this指向会错误

    super(props);

    this.state = {

      val: ''

    };

  }


//组件将要挂在执行

// 一般使用在服务器渲染的时候使用

//不推荐这里请求 ajax  如果数据是空的  页面空白

  componentWillMount() {

    console.log(1)

  }


//组件渲染完成

// 组件第一次渲染完成 此时dom 已经生成 可以在这里请求ajax 返回数据  setState() 组件会重新渲染

  componentDidMount() {

    console.log(2)

  }



//接受到父组件的props 需要重新渲染组价的时候用的比较多

  componentWillReceiveProps (nextProps) {

  }



// 唯一 用于控制组件重新渲染生命周期的  return false 阻止组件更新

  // shouldComponentUpdate(nextProps,nextState) {

  //    //return false

  // }



// 返回true 以后,组件进入重新渲染的流程

  componentWillUpdate (nextProps,nextState) {

  }

// 在组件更新完数据  会进入这个函数  作用是拿到更新之前的 props和state

  componentDidUpdate(prevProps,prevState) {

  }

// 经常会用到的一个生命周期 

//1. 清除定时器  setTimeout setInterval

//2. 移除所有组件中的监听 removeEventListener

//3. 也许你会经常 遇到这个warning 

  componentWillUnmount (){

  }


react this 指向问题

  // 1 react 的this 指向问题 解决方案 箭头函数 ()=》 this.onclick()

  // 2 this.inclick = this.inclick.bind(this)

  // 3  this.inclick.bind(this)




//render 函数会插入 jsx 生成dom结构 react会生成一份虚拟的dom树

  render() {

相关文章

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React生命周期

    React v16.0前的生命周期 React v16.4+ 的生命周期图 React v16.9后这些生命周期钩...

  • React v16 生命周期

    React 16 生命周期 React 16.3 新增的生命周期方法 逐渐废弃的生命周期方法: 一般将生命周期分成...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • react/vue常见问题整理

    一、react 1. react生命周期 react 16生命周期相对于15的变化:componentWillMo...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • 《深入React技术栈》学习笔记Ⅲ

    以下的生命周期都是在 React 15 的生命周期, React 16 的生命周期 API 已经发生变化。Reac...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

网友评论

      本文标题:react 的生命周期

      本文链接:https://www.haomeiwen.com/subject/beetsftx.html