useState为组件添加状态useContext向组件树深层传递数据- 使用方式一: 1.引入
context2.使用Xxx.Consumer组件来创建元素Consumer的标签体需要一个回调函数 它会将context设置为回调函数的参数,通过参数就可以访问到context中存储的数据
const A = () => { return ( <TestContext.Consumer> {(ctx) => { return ( <div> {ctx.name} - {ctx.age} </div> ) }} </TestContext.Consumer> ) }
-
使用
Context方式二: 1.导入 Context 2.使用钩子函数useContext()获取到contextuseContext()需要一个Context作为参数 它会将 Context 中数据获取并作为返回值返回Xxx.
Provider- 表示数据的生产者,可以使用它来指定Context中的数据 - 通过value来指定 Context 中存储的数据, 这样一来,在该组件的所有的子组件中都可以通过Context来访问它所指定数据当我们通过
Context访问数据时,他会读取离他最近的Provider中的数据, 如果没有Provider,则读取Context中的默认数据
const B = () => { // 使用钩子函数获取Context const ctx = useContext(TestContext) return ( <div> {ctx.name} -- {ctx.age} </div> ) }
-
useEffect解决组件产生的副作用 默认情况下,useEffect()中的函数,会在组件渲染完成后调用, 并且是每次渲染完成后都会调用在
useEffect()可以传递一个第二个参数, 第二个参数是一个数组,在数组中可以指定Effect的依赖项 指定后,只有当依赖发生变化时,Effect才会被触发 通常会将Effect中使用的所有的局部变量都设置为依赖项 这样一来可以确保这些值发生变化时,会触发Effect的执行像
setState()是由钩子函数useState()生成的useState()会确保组件的每次渲染都会获取到相同setState()对象 所以setState()方法可以不设置到依赖中 如果依赖项设置了一个空数组,则意味Effect只会在组件初始化时触发一次 -
React.memomemo只会根据props判断是否需要重新渲染,和state和context无关,state或context发生变化时,组件依然会正常的进行重新渲染 -
useReducer可以优化复杂的state -
redux 管理全局应用状态(redux 分支) 使用步骤:
- 引入 redux 核心包
- 创建 reducer 整合函数
- 通过 reducer 对象创建 store
- 对 store 中的 state 进行订阅
- 通过 dispatch 派发 state 的操作指令
-
使用 RTK 简化 redux 操作(RTK 分支)