Hook改变的React Component写法思路(3) – useContext

首先我们回忆一下React Context API的用法（生产者消费者模式）。
创建context对象：

1
2
3
4
5
1// context初始值

2const INITIAL_VALUE = ‘’;

3const MyContext = React.createContext(INITIAL_VALUE);

4

5

划定context使用的范围，管理它的值：

1
2
3
4
5
6
7
8
9
1function App() {

2    return (

3        <MyContext.Provider value=“context value”>

4            <ConsumeComponent />

5        </MyContext.Provider>

6    );

7}

8

9

获取context的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1function ConsumeComponent() {

2    return (

3        <MyContext.Consumer>

4            {contextValue => (

5                <div>

6                    <MyComponent value={contextValue} />

7                    <div>{contextValue}</div>

8                </div>

9            )}

10        </MyContext.Consumer>

11    );

12}

13

14

可以看到，使用Hook之前，消费这个context API是使用render props的方式。那如果这个context是一个原始数据，并不是用来直接显示的时候，就需要繁琐的特殊处理（比如传入到下一层component处理），让人不免尴尬。
有了useContext hook之后，这就不再是个问题了。我们只需要修改消费者那一步：

1
2
3
4
5
6
7
8
9
10
11
1function ConsumeComponent() {

2    const contextValue = useContext(MyContext);

3    return (

4        <div>

5            <MyComponent value={contextValue} />

6            <div>{contextValue}</div>

7        </div>

8    );

9}

10

11

context的值可以直接赋值给变量，然后想处理或者渲染都可以。