美文网首页Web前端之路React
React状态和生命周期

React状态和生命周期

作者: iqing2012 | 来源:发表于2017-10-29 21:29 被阅读12次

用类定义的组件有一些额外的特性。 这个"类专有的特性", 指的就是局部状态。

  • 类允许我们在其中添加本地状态(state)和生命周期钩子。

正确地使用 State(状态)

不要直接修改 state(状态)#
例如,这样将不会重新渲染一个组件:
// 错误this.state.comment = 'Hello';

用 setState()
代替:
// 正确 this.setState({comment: 'Hello'});

唯一可以分配 this.state的地方是构造函数。

state(状态) 更新可能是异步的

React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。

因为 this.props 和 this.state 可能是异步更新的,你不能依赖他们的值计算下一个state(状态)。

  • 要弥补这个问题,使用另一种 setState() 的形式,它接受一个函数而不是一个对象
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

数据向下流动

  • 无论作为父组件还是子组件,它都无法获悉一个组件是否有状态,同时也不需要关心另一个组件是定义为函数组件还是类组件。

  • 这就是 state(状态) 经常被称为 本地状态 或 封装状态的原因。 它不能被拥有并设置它的组件 以外的任何组件访问。

一个组件可以选择将 state(状态) 向下传递,作为其子组件的 props(属性):

相关文章

  • React 文档 Part 1

    —— 基础知识、JSX介绍、React 元素、组件和属性、状态和生命周期 此文档来自 React 官方文档,在英文...

  • Notes On React - Two

    React 的生命周期   React组件 的生命周期大致可分成四个状态:  - Mounting:装配-组件实例...

  • React组件生命周期

    问题 理解React组件的生命周期 知识点 React流程状态图 注意:流程状态图为使用React.createC...

  • react(最近搞了一套react项目的视频 全套 有需

    React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mou...

  • React Native 框架基础

    原文参考及摘录 - React Native的极简手册 组件的生命周期 组件的生命周期分成三个状态: React ...

  • React-native 生命周期

    React v16.0前的生命周期 React 生命周期分为三种状态 初始化 更新 销毁 **•初始化 ** **...

  • React状态和生命周期

    用类定义的组件有一些额外的特性。 这个"类专有的特性", 指的就是局部状态。 类允许我们在其中添加本地状态(sta...

  • React入门(三)

    React Hooks React提供很多钩子函数,可以让函数式组件拥有状态和常用的生命周期函数以及ref/con...

  • React生命周期

    React生命周期有三个阶段 挂在阶段 生命周期钩子函数 constructor:状态初始化 ...

  • react、vue的生命周期

    react.生命周期: (1)无状态组件没有生命周期(2)实例期:①Constructor(){} 在组件挂载之前...

网友评论

    本文标题:React状态和生命周期

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