js-react组件生命周期

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

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

生命周期的方法有:

  • componentWillMount 在渲染前调用,在客户端也在服务端。
  • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
  • componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    可以在你确认不需要更新组件时使用。
  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
  • componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

(DVA)定义组件一般有三种方式:

// 1. 传统写法
const App = React.createClass({});

// 2. es6 的写法
class App extends React.Component({});

// 3. stateless 的写法(我们推荐的写法)
const App = (props) => ({});

其中第1种是我们(DVA)不推荐的写法,第2种是在你的组件涉及 react 的生命周期方法的时候采用这种写法,而第3种则是我们一般推荐的写法。

时间: 2024-10-07 04:21:35

js-react组件生命周期的相关文章

React组件生命周期小结

转载自:http://www.jianshu.com/p/4784216b8194 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函数来控制组件在生命周期的各个阶段的动作. 在ES6中,一个React组件是用一个class来表示的(具体可以参考官方文档),如下: // 定义一个TodoList的React组件,通过继承React.Component来实现 class Tod

React—组件生命周期详解

React-组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢迎加入QQ群(115402375)讨论!博客编写已经转移到http://blog.csdn.net/limm33 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出. React为每个组件

React组件生命周期

组件的生命周期 组件有两个值State状态和PorpType属性,当状态发生变化属性就会发生变化.状态确定属性确定. 状态发生变化时会触发不同的钩子函数,从而让开发者有机会做出响应.状态可以理解为事件. 组件生命周期内 初始化-运行- 销毁 初始化阶段可以使用的钩子函数:getDefaultPorps 获取实例的默认属性/getInitialState获取实例的初始化状态/componentWillMount组件即将被渲染/ render渲染/componentDidMount组件装载之后 运行

React组件生命周期过程说明【转】

实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期 组件已存在时的状态改变 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render com

React组件生命周期过程说明

实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期 组件已存在时的状态改变 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render com

react组件生命周期过程

来自kiinlam github 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期 组件已存在时的状态改变 componentWillReceiveProps shouldComponentUpdate componentWill

React组件生命周期-初始化阶段的函数执行顺序

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./react-0.13.2/build/react.js"></script> <sc

React组件生命周期-正确执行运行阶段的函数

一. 二. 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 9 <body> 10 <script src="./jquery-2.1.4.min.js"><

React组件生命周期-正确执行初始化阶段的函数

一. 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./jquery-2.1.4.min.js"></script> <sc

React 的组件生命周期

React组件的state或者props发生改变后会导致这个组件重新渲染,此时DOM也会有相应的变化.其中只有Render方法在上一篇博文中提到过,就是DOM渲染时的方法.当然,只有这个方法是不够的哦!,引文在实际的开发中,开发者们需要对组件的各个阶段进行控制,这样就可以高效的进行开发了,为此,就有了React的组件生命周期的概念. 对于一个基本的React组件,可以把每一个React组件的生命周期分为初始化.挂载.更新.卸载四个阶段,在React的这四个阶段中提供了不同的方法,以方便开发者有足