[Day06 响应式系统与 React | 青训营笔记]这是我参与「第五届青训营」笔记创作活动的第6天。一、本堂课重

这是我参与「第五届青训营」笔记创作活动的第6天。 一、本堂课重点内容：

React 的历史与应用 - 介绍 React 的发展历史以及应用场景。
React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。
React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks。

该课程需要这些前置知识：

HTML，JS，CSS 基础。
基础的数据结构/算法知识，如二叉树，深度遍历等。
会使用浏览器提供的 DOM API 来修改 DOM，更新 UI。

二、详细知识点介绍：

useState

useEffect

useCallback

记忆函数

useMemo(计算属性功能)

useRef

1.获得被标记的元素节点

2.储存数据

高阶用法缓存数据

当然useRef还有一个很重要的作用就是缓存数据，我们知道usestate ,useReducer 是可以保存当前的数据源的，但是如果它们更新数据源的函数执行必定会带来整个组件从新执行到渲染，如果在函数组件内部声明变量，则下一次更新也会重置，如果我们想要悄悄的保存数据，而又不想触发函数的更新，那么useRef是一个很棒的选择。

5 useContext 自由获取context

我们可以使用useContext ，来获取父级组件传递过来的context值，这个当前值就是最近的父级组件 Provider 设置的value值，useContext参数一般是由 createContext 方式引入 ,也可以父级上下文context传递 ( 参数为context )。useContext 可以代替 context.Consumer 来获取Provider中保存的value值

/* 用useContext方式 */
const DemoContext = ()=> {
    const value:any = useContext(Context)
    /* my name is alien */
return <div> my name is { value.name }</div>
}

/* 用Context.Consumer 方式 */
const DemoContext1 = ()=>{
    return <Context.Consumer>
         {/*  my name is alien  */}
        { (value)=> <div> my name is { value.name }</div> }
    </Context.Consumer>
}

export default ()=>{
    return <div>
        <Context.Provider value={{ name:'alien' , age:18 }} >
            <DemoContext />
            <DemoContext1 />
        </Context.Provider>
    </div>
}

useReducer

useReducer和useContext联合使用

import React, {useContext, useReducer} from 'react';
//处理函数
const reducer =(preState,action)=>{
    let newState = {...preState}
    switch (action.type){
        case "change-a":
            newState.a = action.value
            return newState
        case "change-b":
            newState.b = action.value
            return newState
        default:
            return preState
    }
}
// 外部的对象
const initialState={
    a:"111111",
    b:"111111"
}

const GlobalContext = React.createContext()
export default function App() {
  // useReducer的应用
    const [state,dispatch] = useReducer(reducer,initialState)
    return (
        <GlobalContext.Provider value={
            {
                state,
                dispatch
            }
        }>
            <div>
                <Child1/>
                <Child2/>
                <Child3/>
            </div>
        </GlobalContext.Provider>
    );
}
function Child1(){
    const {dispatch} = useContext(GlobalContext)
    return(
        <div>
            <button onClick={()=>{
                dispatch({
                    type:"change-a",
                    value:"aaaaaa"
                })
            }
            }>改变a</button>
            <button onClick={()=>{
                dispatch({
                    type:"change-b",
                    value:"bbbbbb"
                })
            }
            }>改变b</button>
        </div>
    )
}
function Child2(){
    const {state} = useContext(GlobalContext)
    return(
        <div>
            child2-{state.a}
        </div>
    )
}
function Child3(){
    const {state} = useContext(GlobalContext)
    return(
        <div>
            child3-{state.b}
        </div>
    )
}

三、课后个人总结： 可以去这里理解一下

juejin.cn/post/686443…

[Day06 响应式系统与 React | 青训营笔记]