react-生命周期

1.组件的生命周期可分成三个状态:

Mounting:已插入真实 DOM

Updating:正在被重新渲染

Unmounting:已移出真实 DOM

2.生命周期的方法有:

componentWillMount在渲染前调用,在客户端也在服务端。(过期?)

componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。  (常用)

componentWillReceiveProps在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。(常用)

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。(常用)

getDerivedStateFromProps在初始安装和后续更新上都在调用render方法之前立即调用。它应该返回一个对象以更新状态,或者返回null则不更新任何内容。

此方法适用于状态依赖于道具随时间变化的罕见用例。例如,实现一个<Transition>比较其上一个和下一个子项以决定要对哪个子项进行动画处理的组件可能很方便。


3.React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例;

ReactDOM.render()渲染组件时返回的是组件实例;

渲染dom元素时,返回是具体的dom节点。

ref可以挂载到组件上也可以是dom元素上;

挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性,因为它们没有实例:

挂载到dom元素上时表示具体的dom元素节点。

ref属性可以设置为一个回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行。

当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。

当给组件添加 ref 属性时,ref 回调接收当前组件实例作为参数。

当组件卸载的时候,会传入null

ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个...
    解勾股阅读 768评论 0 0
  • React组件的生命周期划分为出生(mount),更新(update)和死亡(unmount),然而我们怎么知道组...
    一只大橘阅读 809评论 1 10
  • 组件的生命周期 在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化...
    bluesky_96ce阅读 182评论 0 0
  • 在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。一个组件就是一...
    薄荷加冰阅读 306评论 0 1
  • 创造:要帮助用户实现价值创造! 潮流:要关注潮流、研究潮流动因、寻找潮流规律,顺势者生! 建立心理边界:识破攻击、...
    尼克鸥QL阅读 203评论 1 0