React Hooks—— context hooks

前端御书房2023-10-06 12:10

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

简洁
从语法上来说，写的代码少了
上手非常简单
- 基于函数式编程理念，只需要掌握一些JavaScript基础知识
- 与生命周期相关的知识不用学，react Hooks使用全新的理念来管理组件的运作过程
- 与HOC相关的知识不用学，React Hooks能够完美解决HOC想要解决的问题，并且更可靠
- Mobx取代了Redux做状态管理
代码复用性更好
与Typescript结合更简单

React Hooks的缺点

状态不同步
在异步操作的函数中访问的状态还是原来的状态的值
useEffect依赖问题
当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

命名规范
自定义Hooks的命名一律使用use作为前缀，形如：useXXX
仅在最外层调用React Hooks
仅从react函数中调用react Hooks
在自定义Hooks或者组件中调用Hooks

useContext

Context是一种对其所包含组件树提供全局共享数据的技术，而useContext是在React Hooks对Context进行的封装。它可以帮助我们跨越组件层级直接传递函数，实现数据共享，让使用变得简单。

createContext

createContext(initialValue)：

initialValue：initialValue是context的初始值

useContext返回的对象包含两个属性：

Provider：提供者，是React组件使用Provider标签包裹后的组件，自身及其后代都可以访问Context的值
Consumer：消费者，是React组件使用Consumer包裹后，可以使用render props的方式渲染内容，获取context的值。

jsx 复制代码

const MyContext = React.CreateContext()

function Demo() {
   const [userName,setUserName]=useState('');
   const {Provider,Consumer} = useContext(MyContext);
    return <>
    <Provider value={userName}>
        <B></B>
    </Provider>
    </>
}

function Child {
    const context = useContext(MyContext);
	render(){
        return <>
        <C></C>
        </>
    }
} 
function C {
    return <>
    <Consumer>
    	{value => `姓名是${value.userName}`}
    </Consumer>
    </>
}