【React】State

组件的内存（State）

 State: A Component's Memory | React 中文文档 | React 中文网

 props是一个不可改变的静态变量，每次更新其实都是内存回收原本的props，这个操作的系统开销是十分之大的，很多时候我们也只是想去改变其中的一个值同时让页面可以重新渲染而已，为此，State就是帮助你去做这么一件事。

Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state.

 state是一种特殊的组件内存，通过去改变state中的值，从而使得程序可以自己知道值改变了并重新渲染。

文档中展示了一个案例，最主要还是想说一件事，其实和前面自己描述的差不多，同时提供了解决方法

1. Local variables don’t persist between renders. When React renders this component a second time, it renders it from scratch—it doesn’t consider any changes to the local variables.
2. Changes to local variables won’t trigger renders. React doesn’t realize it needs to render the component again with the new data.

To update a component with new data, two things need to happen:

1. Retain the data between renders.
2. Trigger React to render the component with new data (re-rendering).

The useState Hook provides those two things:

1. A state variable to retain the data between renders.
2. A state setter function to update the variable and trigger React to render the component again.

组件的内存（State）

使用state变量

Hook

useState的详解

State is isolated and private

---

使用state变量

基本的用法

import { useState } from 'react';


export default function test(){
    const [index, setIndex] = useState(0);
    // index is a state variable and setIndex is the setter function.
}

The [ and ] syntax here is called array destructuring and it lets you read values from an array. The array returned by useState always has exactly two items.

这里觉得对useState有进一步的认知，最主要体现在如何去实现，设的每一个值得意义，按照自己目前得理解就是数组中的第一个值是现在的值，第二个就是改名这个值的函数，具体的再后面会继续补充。

Hook

 引入一个 Hook得概念，什么是Hook呢？

In React, useState, as well as any other function starting with ”use,” is called a Hook.

只要是开头是用use开头的函数都叫做 Hook （钩子）

为什么叫做Hook（钩子）呢？

因为Hooks是React中的一种特殊函数，它可以帮助我们去“hook into” （钩人）对于的React的功能

需要注意的

Hooks—functions starting with use—can only be called at the top level of your components or your own Hooks. You can’t call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it’s helpful to think of them as unconditional declarations about your component’s needs. You “use” React features at the top of your component similar to how you “import” modules at the top of your file.

翻译就是
钩子(从使用开始的函数)只能在组件或您自己的钩子的顶层调用。不能在条件、循环或其他嵌套函数中调用hook。钩子是函数，但是把它们看作是对组件需求的无条件声明是很有帮助的。您可以在组件顶部“使用”React特性，就像在文件顶部“导入”模块一样。

useState的详解

当我们使用useState的时候，就是通过其告诉React去记住这个组件需要记住一些事情：

const [index, setIndex] = useState(0);

这里一开始会很困惑为什么这样写，最快的方式应该是看源码（还是会有点好奇的）。

The convention is to name this pair like const [something, setSomething]. You could name it anything you like, but conventions make things easier to understand across projects.

The only argument to useState is the initial value of your state variable. In this example, the index’s initial value is set to 0 with useState(0).

Every time your component renders, useState gives you an array containing two values:

1. The state variable (index) with the value you stored.
2. The state setter function (setIndex) which can update the state variable and trigger React to render the component again.

Here’s how that happens in action:

        const [index, setIndex] = useState(0);

1. Your component renders the first time. Because you passed 0 to useState as the initial value for index, it will return [0, setIndex]. React remembers 0 is the latest state value.
2. You update the state. When a user clicks the button, it calls setIndex(index + 1). index is 0, so it’s setIndex(1). This tells React to remember index is 1 now and triggers another render.
3. Your component’s second render. React still sees useState(0), but because React remembers that you set index to 1, it returns [1, setIndex] instead.
4. And so on!

这里是从表面大概说了usestate是如何去运行的，更新数据重新渲染之类的，但是其背后的底层原理还是可以去了解一下的。（文档中也有专题写，觉得很值得去看看）

State is isolated and private

正常应该翻译的，但是真的不知道该怎么翻译.....

State is local to a component instance on the screen. In other words, if you render the same component twice, each copy will have completely isolated state! Changing one of them will not affect the other.

这里讲的就是即使你同时去render同一个组件函数，他们的state值是相互独立的，觉得这里应该从打包的角度去理解会更加简单

      <Gallery />
      <Gallery />

比如我们重复渲染了两个<Gallery /> 组件，理论上是调用了同一个方法，但是打包的时候的dist中的代码他们也是写了两次，所以就是不一样的空间去存储的。

 Also notice how the Page component doesn’t “know” anything about the Gallery state or even whether it has any. Unlike props, state is fully private to the component declaring it. The parent component can’t change it. This lets you add state to any component or remove it without impacting the rest of the components.

这里说组件不知道 Gallery state的所有信息，然后是知道props的所有信息的，毕竟是传进来的嘛。所以说state的是组件完全私有的，父组件是不能够改变他的，同时由于父亲不知道，那么其他组件其实也是不知道的，这里讲了好多细节，由于蜻蜓点水，感觉还是很浅，就大概知道一下吧