vlambda博客
学习文章列表

React核心概念-第二篇


State


React中的响应式设计思想



React的设计思想和Jquery直接操作dom是完全不同的,React是一种响应式的框架设计,推荐我们操作的是数据,通过数据的变化,React会自动感知到数据的变化,自动的帮你去生成dom,而数据通常就是保存在组件的state里的。






State - 状态,即组件里的状态。状态代表事物表示出来的形态,比如门,开着或关着,我们可以用数据1或0来表示开或关的形态,对应到组件里,我们可以用状态(通常是一个对象保存各种需要的数据)去描述UI对应形态的动态数据(某个时刻UI数据)


React核心概念-第二篇


对State的理解可以归纳以下几点:


1. 状态是保存动态数据的特殊对象,这意味着状态可以根据用户操作或某些事件随时随地更改。

2. 状态在所属组件的构造函数中被初始化,且是所属组件私有的,无法从外部访问,但可以通过props传递给子组件。

3. 每个时刻的状态就像电影中的一帧,我们对UI的更新应该使用setState()才可以触发重新渲染去更新成功。


在早期,状态只能在类组件中使用,但是在引入React Hooks之后,状态现在可以在类和功能组件中使用,但此处我们只讨论class组件的实现,先看一个简单的受控组件(数据归State管控)场景:

input的初始值为空,当事件响应后,通过setState改变State中绑定的input的值,从而触发重新渲染更新UI,此时我们看到input的值就是修改过后的,示例代码如下

现在我们input中的值由State管控起来了,当onChange响应后,console打印出每次输入的值,UI也随之更新,这里我们只需关心数据的变化e.target.value拿到最新的数据传入setState函数后,其余交给React去处理更新UI,这也是React思想希望我们做的 - 只需关心数据。