这是我参加前端训练营笔记活动的第11天。

React状态管理（书接上回）

React状态管理简介

Local State（props）

Local State顾名思义，就是组件级别的局部状态，比如：

import {useState} from 'react'
const Hello = () => {
    const [name,setName] = useState('Jony')
    return <>Hello,{name}</>
}

上述的name就是一个最简单的局部Local State。只在Hello这个组件中生效。当组件创建时初始化和生效，组件销毁时失效。

我们知道react的数据流是自上而下的，大部分情况下Local State就可以满足我们的要求，但是也有例外，遇到部分情况，我们不需要马上去引入状态管理，对于某些情况可以优先考虑将状态向上一级，放在父组件中，由父组件自上而下的传递。

当然这种向上延伸的方法不是无限的。如果一直往上延伸，会出现一个父组件嵌套十几层子组件的情况，，必须要有一个“度”，超过这个“度”后，我们就认为Local State的方式就不太实用了。

这个“度”在前端开发中大部分情况下我们认为就是子页面。我们一般认为，单页应用中，子页面以及子页面之下的组件都是可以用Local State来解决状态管理问题的，而子页面与子页面之间，是不需要再往上延伸的。子页面与子页面之间的通信，react本身提供了context。

react中的context解决了react中，props或者state进行多级数据传递，则数据需要自顶下流经过每一级组件，无法跨级的问题。但是context在页面间共享数据的时候同样有很多问题：
1、context相当于全局变量，难以追溯数据变更情况
2、使用context的组件内部耦合度太高，不利于组件复用和单元测试
3、会产生不必要的更新（比如穿透memo和dependencies等）
4、context只能存储单一值，无法存储多个各自拥有消费者的值的集合
5、粒度也不太好控制，不能细粒度的区分组件依赖了哪一个context
6、多个context会存在层层嵌套的问题