React核心概念-第二篇

Posted 2021-04-26 React Tutorial

State

React中的响应式设计思想

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

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

对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思想希望我们做的 - 只需关心数据。