ReactNative学习七-组件说明和生命周期

组件的详细说明(Component Specifications)

当通过调用React.createClass()来创建组件的时候,你应该提供一个包含render方法的对象,并且也可以包含其它的在这里描述的生命周期方法。

render

ReactComponent render()

render()方法是必须的。

当调用的时候,会检测this.propsthis.state,返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件(比如<div />或者React.DOM.div()),也可以是自定义的复合组件。

你也可以返回null或者false来表明不需要渲染任何东西。实际上,React 渲染一个<noscript>标签来处理当前的差异检查逻辑。当返回false的时候,this.getDOMNode()将返回null

render()函数应该是纯粹的,也就是说该函数不修改组件 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互(例如通过使用setTimeout)。如果需要和浏览器交互,在componentDidMount()中或者其它生命周期方法中做这件事。保持render()纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。

getInitialState

object getInitialState()

在组件挂载之前调用一次。返回值将会作为this.state的初始值。

getDefaultProps

object getDefaultProps()

在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到this.props(使用in检测属性)。

该方法在任何实例创建之前调用,因此不能依赖于this.props。另外,getDefaultProps()返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。

propTypes

object propTypes

propTypes对象允许验证传入到组件的 props。更多关于propTypes的信息,参考可重用的组件

mixins

array mixins

mixin数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息,参考 statics

object statics

statics对象允许你定义静态的方法,这些静态的方法可以在组件类上调用。例如:

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  renderfunction() {
  }
});

MyComponent.customMethod('bar');  // true

在这个块儿里面定义的方法都是静态的,意味着你可以在任何组件实例创建之前调用它们,这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值,在调用处把 props 作为参数传入到静态方法。

displayName

string displayName

displayName字符串用于输出调试信息。JSX 自动设置该值;参考JSX 深入

生命周期方法

许多方法在组件生命周期中某个确定的时间点执行。

挂载: componentWillMount

componentWillMount()

服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用setStaterender()将会感知到更新后的 state,将会执行仅一次,尽管 state 改变了。

挂载: componentDidMount

componentDidMount()

在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个 DOM 展现,你可以通过this.getDOMNode()来获取相应 DOM 节点。

如果想和其它 JavaScript 框架集成,使用setTimeout或者setInterval来设置定时器,或者发送 AJAX 请求,可以在该方法中执行这些操作。

注意:

为了兼容 v0.9,DOM 节点作为最后一个参数传入。你依然可以通过this.getDOMNode()获取 DOM 节点。

更新: componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。

用此函数可以作为 react 在 prop 传入之后,render()渲染之前更新 state 的机会。老的 props 可以通过this.props获取到。在该函数中调用this.setState()将不会引起第二次渲染。

componentWillReceivePropsfunction(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

注意:

对于 state,没有相似的方法:componentWillReceiveState。将要传进来的 prop 可能会引起 state 改变,反之则不然。如果需要在 state 改变的时候执行一些操作,请使用componentWillUpdate

更新: shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用forceUpdate方法的时候也不会。

如果确定新的 props 和 state 不会导致组件更新,则此处应该返回 false

shouldComponentUpdatefunction(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果shouldComponentUpdate返回 false,则render()将不会执行,直到下一次 state 改变。(另外,componentWillUpdatecomponentDidUpdate也不会被调用。)

默认情况下,shouldComponentUpdate总会返回 true,在state改变的时候避免细微的 bug,但是如果总是小心地把state当做不可变的,在render()中只从propsstate读取值,此时你可以覆盖shouldComponentUpdate方法,实现新老 props 和 state 的比对逻辑。

如果性能是个瓶颈,尤其是有几十个甚至上百个组件的时候,使用shouldComponentUpdate可以提升应用的性能。

更新: componentWillUpdate

componentWillUpdate(object nextProps,249)"> 在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

使用该方法做一些更新之前的准备工作。

注意:

不能在刚方法中使用this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用componentWillReceiveProps

更新: componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

使用该方法可以在组件更新之后操作 DOM 元素。

注意:

为了兼容 v0.9,DOM 节点会作为最后一个参数传入。如果使用这个方法,你仍然可以使用this.getDOMNode()来访问 DOM 节点。

移除: componentWillUnmount

componentWillUnmount()

在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理,比如无效的定时器,或者清除在componentDidMount中创建的 DOM 元素。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom