</CountContext.Provider>
   </div>

) } export default Example4;

> 这段代码就相当于把`count`变量允许跨层级实现传递和使用了（也就是实现了上下文），当父组件的`count`变量发生变化时，子组件也会发生变化。接下来我们就看看一个`React Hooks`的组件如何接收到这个变量。
<a name="a5a29324"></a>
## 2、useContext 接收上下文变量
> 已经有了上下文变量，剩下的就时如何接收了，接收这个直接使用useContext就可以，但是在使用前需要新进行引入`useContext`（不引入是没办法使用的）。
> ```jsx
import React, { useState , createContext , useContext } from 'react';

引入后写一个Counter组件，只是显示上下文中的count变量代码如下：

function Counter(){
   const count = useContext(CountContext)  //一句话就可以得到count
   return (<h2>{count}</h2>)
}

得到后就可以显示出来了，但是要记得在<CountContext.Provider>的闭合标签中,代码如下。

<CountContext.Provider value={count}>
   <Counter />
</CountContext.Provider>

五、useReducer介绍和简单使用

上节学习了useContext函数，那这节开始学习一下useReducer，因为他们两个很像，并且合作可以完成类似的Redux库的操作。在开发中使用useReducer可以让代码具有更好的可读性和可维护性，并且会给测试提供方便。

1、reducer到底是什么？

为了更好的理解useReducer，所以先要了解JavaScript里的Redcuer是什么。

• 它的兴起是从Redux广泛使用开始的，但不仅仅存在Redux中，可以使用JavaScript来完成Reducer操作。
• 那reducer其实就是一个函数，这个函数接收两个参数，一个是状态，一个用来控制业务逻辑的判断参数。
• 我们举一个最简单的例子。

function countReducer(state, action) {
    switch(action.type) {
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        default: 
            return state;
    }
}

上面的代码就是Reducer，你主要理解的就是这种形式和两个参数的作用，一个参数是状态，一个参数是如何控制状态。

2、useReducer的使用

了解reducer的含义后，就可以讲useReducer了，它也是React hooks提供的函数，可以增强我们的Reducer，实现类似Redux的功能。我们新建一个Example5.js的文件，然后用useReducer实现计数器的加减双向操作。

```jsx import React, { useReducer } from ‘react’;

function ReducerDemo(){ const [ count , dispatch ] =useReducer((state,action)=>{ switch(action){ case ‘add’: return state+1 case ‘sub’: return state-1 default: return state } },0) return (

}

export default ReducerDemo

> 这段代码是useReducer的最简单实现了，这时候可以在浏览器中实现了计数器的增加减少。
> 修改`index.js`文件，让`ReducerDemo`组件起作用。
> ```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example5'
ReactDOM.render(<Example />, document.getElementById('root'));

六、useReducer代替Redux小案例

此处参考了掘金上缪宇的文章 —参考文章,此处将其整理下来,方便查阅

未来我将会尝试使用useReducer替代Mobx状态管理器,并记录区别,但现在只是学习阶段,Mark一下

1、为何使用useReducer

Redux 毫无疑问是众多 React 项目首选的状态管理方案，但 Redux 某些地方的开发体验并不好。

比如当你正在开发一个很复杂的功能，中途需要不断添加全局状态，每次添加都不得不重复如下步骤：

1. 去到管理 redux 的文件夹，思考把这个状态放到状态树的哪个位置，然后新建一个文件夹并命名 myFeature。
2. 创建三个文件 my-feature/actions.js 、my-feature/reducer.js、my-feature/type.js
3. combineReducer 和并 reduce
4. 将 action 引入到组件中
5. 通过 connect HOC 与你的组件相连
6. 增加两个方法 mapStateToProps 和 mapDispatchToProps

以上只是加个状态而已，写很多模板代码还是其次，最要命的是会打断你写代码的思路。

而且随着项目越来越大， redux 的状态树也会变大，维护也会变困难。

2、useContext + useReducer 如何替代 redux ？及可行性

useContext 和 useReducer 是 React 16.8 引入的新 API。

useContext：可访问全局状态，避免一层层的传递状态。这符合Redux其中的一项规则，就是状态全局化，并能统一管理。

useReducer：通过action的传递，更新复杂逻辑的状态，主要是可以实现类似Redux中的Reducer部分，实现业务逻辑的可行性。

3、案例代码示例

Ⅰ、开始

首先用 create-react-app 创建一个项目

Ⅱ、创建颜色展示组件 ShowArea

import React from 'react'
const ShowArea = (props) => {
  return (
    <div style={{color: "blue"}}>字体颜色展示为blue</div>
  )
}
export default ShowArea

Ⅲ、创建按钮组件 buttons

import React from "react";
const Buttons = props => {
  return (
    <div>
      <button>红色</button>
      <button>黄色</button>
      </div>
  );
};
export default Buttons;

Ⅳ、将 ShowArea 和 Buttons 导入 index.js(等会写出color状态组件后将会改写)

import React from "react";
import ReactDOM from "react-dom";
import ShowArea from './ShowArea'
import Buttons from './Buttons'
function App() {
  return (
    <div className="App">
      <ShowArea />
      <Button />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ⅴ、状态管理组件创建编写

很明显 ShowArea 组件需要一个颜色状态，所以我们创建 color.js 来处理状态。 {props.children}传值给子组件(多个)

// color.js
import React, { createContext } from "react";
// 创建 context
export const ColorContext = createContext({});
/**
 * 创建一个 Color 组件
 * Color 组件包裹的所有子组件都可以通过调用 ColorContext 访问到 value
 */
export const Color = props => {
  return (
    <ColorContext.Provider value={{ color: "blue" }}>
      {props.children}
    </ColorContext.Provider>
  );
};

Ⅵ、引入状态

修改 index.js，让所有子组件都可以访问到颜色。

// index.js
import { Color } from "./color";
function App() {
  return (
    <div className="App">
      <Color>
        <ShowArea />
        <Buttons />
      </Color>
    </div>
  );
}

Ⅶ、获取状态

在 ShowArea 组件中获取颜色 直接引入 然后使用useContext进行获取使用

// ShowArea.js
import { ColorContext } from "./color";
const ShowArea = props => {
  const { color } = useContext(ColorContext);
  return <div style={{ color: color }}>字体颜色展示为{color}</div>;
};

Ⅷ、创建 reducer

接着在 color.js 中添加 reducer， 用于处理颜色更新的逻辑。 然后使用useReducer传入reducer进行处理

import React, { createContext, useReducer } from "react";
// 创建 context
export const ColorContext = createContext({});
//声明常量是方便使用
export const UPDATE_COLOR = "UPDATE_COLOR"
// reducer方法 声明
const reducer = (state, action) => {
  switch(action.type) {
    case UPDATE_COLOR:
      return action.color
    default:
      return state  
  }
}
/**
 * 创建一个 Color 组件
 * Color 组件包裹的所有组件都可以访问到 value
 */
export const Color = props => {
  const [color, dispatch] = useReducer(reducer, 'blue')
  return (
    <ColorContext.Provider value={{color, dispatch}}>
      {props.children}
    </ColorContext.Provider>
  );
};

Ⅸ、更新状态

为按钮添加点击事件，调用 dispatch 就可以更新颜色了。

// buttons.js
import React, { useContext } from "react";
import { colorContext, UPDATE_COLOR } from "./color";
const Buttons = props => {
  const { dispatch } = useContext(colorContext);
  return (
    <React.Fragment>
      <button
        onClick={() => {
          dispatch({ type: UPDATE_COLOR, color: "red" });
        }}
      >
        红色
      </button>
      <button
        onClick={() => {
          dispatch({ type: UPDATE_COLOR, color: "yellow" });
        }}
      >
        黄色
      </button>
    </React.Fragment>
  );
};
export default Buttons;

4、总结

• useContext 创建全局状态，不用一层一层的传递状态。
• useReducer 创建 reducer 根据不同的 dispatch 更新 state。
• 代码写到哪里状态就加到哪里，不用打断思路跳到 redux 里面去写。
• 全局状态分离，避免项目变大导致 Redux 状态树难以管理。

所以 useContext + useReducer 完全可以替代 React 进行状态管理。但是目前绝大多数 React 项目仍在使用 Redux，所以深入学习 Redux 还是很有必要的。

七、useMemo优化React Hooks程序性能

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新之前）这个生命周期，也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中，也不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行内部的所有逻辑，就带来了非常大的性能损耗。useMemo和useCallback都是解决上述性能问题的

1、性能问题展示案例

先编写一下刚才所说的性能问题，建立两个组件,一个父组件一个子组件，组件上由两个按钮，一个是小洪，一个是帅洪，点击哪个，那个就像我们走来了。在/src文件夹下，新建立一个Example7的文件夹，在文件夹下建立一个Example7.js文件.然后先写第一个父组件。

```jsx import React , {useState,useMemo} from ‘react’;

function Example7(){ const [xiaohong , setXiaohong] = useState(‘小洪待客状态’) const [zhiling , setZhiling] = useState(‘帅洪待客状态’) return ( <> {setXiaohong(new Date().getTime())}}>小洪 {setZhiling(new Date().getTime()+’,帅洪向我们走来了’)}}>洪帅 {zhiling} </> ) }

> 父组件调用了子组件，子组件我们输出两个人的状态，显示在界面上。代码如下：
> ```jsx
function ChildComponent({name,children}){
    function changeXiaohong(name){
        console.log('她来了，她来了。小洪向我们走来了')
        return name+',小洪向我们走来了'
    }
    const actionXiaohong = changeXiaohong(name)//如果此组件重新渲染,就会执行函数,导致多次打印
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

然后再导出父组件，让index.js可以渲染。

export default Example7

• 这时候你会发现在浏览器中点击帅洪按钮
• 小红对应的方法都会执行，结果虽然没变，但是每次都执行，这就是性能的损耗。
• 目前只有子组件，业务逻辑也非常简单，如果是一个后台查询，这将产生严重的后果。所以这个问题必须解决。
• 我们需要做到: 当我们点击帅洪按钮时，小洪对应的changeXiaohong方法不能执行，只有在点击小洪按钮时才能执行。

2、useMemo 优化性能

其实只要使用useMemo，然后给她传递第二个参数，参数匹配成功，才会执行。代码如下：

```javascript function ChildComponent({name,children}){ function changeXiaohong(name){ console.log(‘她来了，她来了。小洪向我们走来了’) return name+’,小洪向我们走来了’ }

const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) return ( <>

> - 这时在浏览器中点击一下`帅洪`按钮，`changeXiaohong`就不再执行了。
> - 也节省了性能的消耗。案例只是让你更好理解，你还要从程序本身看到优化的作用。
> - 好的程序员对自己写的程序都是会进行不断优化的，这种没必要的性能浪费也是绝对不允许的，所以`useMemo`的使用在工作中还是比较多的。
<a name="d4180520"></a>
## 3、可能遇到的坑
<a name="9406dada"></a>
### Ⅰ - 传递的第二个参数使用赋值解构
> > <a name="4830a445"></a>
###### 错误代码
> ```jsx
const data = useMemo(() => {
   console.log(test,"触发")
   return {
       test: test + "onChange"
   }
},{...test}) //此处错误,不能用赋值解构方式

可能有同学ES6用习惯了,喜欢用赋值解构方式,想说实现 test对象中某一属性发生变化 是触发,就直接这样写了,但实际上,这样写的话每次传入的都是一个新的对象,会导致 useMemo 没有效果

正确的写法

const data = useMemo(() => {
   console.log(test,"触发")
   return {
       test: test + "onChange"
   }
},{test}) //直接变量写入即可

八、useRef获取DOM元素和保存变量

useRef在工作中虽然用的不多，但是也不能缺少。它有两个主要的作用:

• 用useRef获取React JSX中的DOM元素，获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作，React界面的变化可以通过状态来控制。
• 用useRef来保存变量，这个在工作中也很少能用到，我们有了useContext这样的保存其实意义不大

1、useRef获取DOM元素

比如一个案例,想象一下:界面上有一个文本框，在文本框的旁边有一个按钮，当我们点击按钮时，在控制台打印出input的DOM元素，并进行复制到DOM中的value上。这一切都是通过useRef来实现。

在/src文件夹下新建一个Example8.js文件，然后先引入useRef，编写业务逻辑代码如下:

import React, { useRef} from 'react';
function Example8(){
    const inputEl = useRef(null)
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,JSPang"
        console.log(inputEl) //输出获取到的DOM节点
    }
    return (
        <>
            {/*保存input的ref到inputEl */}
            <input ref={inputEl} type="text"/>
            <button onClick = {onButtonClick}>在input上展示文字</button>
        </>
    )
}
export default Example8

当点击按钮时，你可以看到在浏览器中的控制台完整的打印出了DOM的所有东西，并且界面上的<input/>框的value值也输出了我们写好的Hello ,JSPang。这一切说明我们可以使用useRef获取DOM元素，并且可以通过useRefu控制DOM的属性和值。

2、useRef保存普通变量

这个操作在实际开发中用的并不多，但我们还是要讲解一下。就是useRef可以保存React中的变量。我们这里就写一个文本框，文本框用来改变text状态。又用useRef把text状态进行保存，最后打印在控制台上。写这段代码你会觉的很绕，其实显示开发中没必要这样写，用一个state状态就可以搞定，这里只是为了展示知识点。

接着上面的代码来写，就没必要重新写一个文件了。先用useState声明了一个text状态和setText函数。然后编写界面，界面就是一个文本框。然后输入的时候不断变化。

```javascript import React, { useRef ,useState,useEffect } from ‘react’;

function Example8(){ const inputEl = useRef(null) const onButtonClick=()=>{ inputEl.current.value=”Hello ,useRef” console.log(inputEl) } const [text, setText] = useState(‘jspang’) return ( <> {/保存input的ref到inputEl /} 在input上展示文字

{setText(e.target.value)}} />

    </>
)

}

export default Example8

> 这时想每次`text`发生状态改变，保存到一个变量中或者说是`useRef`中，这时候就可以使用`useRef`了。先声明一个`textRef`变量，他其实就是`useRef`函数。然后使用`useEffect`函数实现每次状态变化都进行变量修改，并打印。最后的全部代码如下。
> ```javascript
import React, { useRef ,useState,useEffect } from 'react';
function Example8(){
    const inputEl = useRef(null)
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,useRef"
        console.log(inputEl)
    }
    //-----------关键代码--------start
    const [text, setText] = useState('jspang')
    const textRef = useRef()
    useEffect(()=>{
        textRef.current = text;
        console.log('textRef.current:', textRef.current)
    })
    //----------关键代码--------------end
    return (
        <>
            {/*保存input的ref到inputEl */}
            <input ref={inputEl} type="text"/>
            <button onClick = {onButtonClick}>在input上展示文字</button>
            <br/>
            <br/>
            <input value={text} onChange={(e)=>{setText(e.target.value)}} />
        </>
    )
}
export default Example8

这时候就可以实现每次状态修改，同时保存到useRef中了。也就是我们说的保存变量的功能。那useRef的主要功能就是获得DOM和变量保存，我们都已经讲过了。

九、自定义Hooks函数获取窗口大小

其实自定义Hooks函数和用Hooks创建组件很相似，跟我们平时用JavaScript写函数几乎一模一样，可能就是多了些React Hooks的特性，自定义Hooks函数偏向于功能，而组件偏向于界面和业务逻辑。由于差别不大，所以使用起来也是很随意的。如果是小型项目是可以的，但是如果项目足够复杂，这会让项目结构不够清晰。所以学习自定义Hooks函数还是很有必要的。

1、编写自定义函数

在实际开发中，为了界面更加美观。获取浏览器窗口的尺寸是一个经常使用的功能，这样经常使用的功能，就可以封装成一个自定义Hooks函数，记住一定要用use开头，这样才能区分出什么是组件，什么是自定义函数。

新建一个文件Example9.js,然后编写一个useWinSize,编写时我们会用到useState、useEffect和useCallback所以先用import进行引入。

import React, { useState ,useEffect ,useCallback } from 'react';

• 然后编写函数，函数中先用useState设置size状态
• 然后编写一个每次修改状态的方法onResize,这个方法使用useCallback，目的是为了缓存方法(useMemo是为了缓存变量)。
• 然后在第一次进入方法时用useEffect来注册resize监听时间。
• 为了防止一直监听所以在方法移除时，使用return的方式移除监听。最后返回size变量就可以了。

resize 浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件,这是js监听事件

```javascript function useWinSize(){ const [ size , setSize] = useState({ width:document.documentElement.clientWidth, height:document.documentElement.clientHeight })

const onResize = useCallback(()=>{
    setSize({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    })
},[]) 
useEffect(()=>{
    {/*  resize  浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件*/}
    window.addEventListener('resize',onResize)
    return ()=>{
        window.removeEventListener('resize',onResize)
    }
},[])
return size;

}

> 这就是一个自定义函数，其实和我们以前写的JS函数没什么区别，所以这里也不做太多的介绍。
<a name="5e388ca2"></a>
## 2、编写组件并使用自定义函数
> 自定义`Hooks`函数已经写好了，可以直接进行使用，用法和`JavaScript`的普通函数用起来是一样的。直接在`Example9`组件使用`useWinSize`并把结果实时展示在页面上。
> ```javascript
function Example9(){
   const size = useWinSize()
   return (
       <div>页面Size:{size.width}x{size.height}</div>
   )
}
export default Example9

之后就可以在浏览器中预览一下结果，可以看到当我们放大缩小浏览器窗口时，页面上的结果都会跟着进行变化。说明自定义的函数起到了作用。

十、React的React.FC与React.Component的初步认识

• 即Hooks与Component

• 正常来讲,尽量使用React.FC

1、React.FC<>

1. React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent：

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
<div>{message}</div>
);

1. React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。

2. React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一些问题）。

3. 我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。

----------------------- 使用方法1 ----------------------------------------
const SampleModel: React.FC<{}> = () =>{   //React.FC<>为typescript使用的泛型
    const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
    return{
    {/** 触发模态框**/}
    <Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >样例</Button>
    {/** 模态框组件**/}
    <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
}
------------------------- 使用方法2 ----------------------------------------------
import React, { FC } from 'react';
import { observer, useLocalStore } from 'mobx-react'; //引入mobx状态管理器
//组件    
const ChannelManager: FC = () => {
  const store = useLocalStore<Store>(() => new Store());
  .....
}
export default observer(ChannelManager);

2、class xx extends React.Component

如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在TypeScript中，React.Component是通用类型（aka React.Component），因此要为其提供（可选）prop和state类型参数：

class SampleModel extends React.Component {
state = {  createModalVisible:false, };
handleModalVisible =(cVisible:boolean)=>{ this.setState({createModalVisible:cVisible});};
return {
{/** 触发模态框**/}
    <Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
    {/** 模态框组件**/}
    <Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
}