react hooks学习篇（一）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

一、useState

在函数组件里面我们使用useState来声明变量或是说添加状态。

const [count, setCount] = useState(0);
setCount(y => y + 1)

useState参数是定义初始的state，它返回值我们采用数组结构方式，一个是当前的state，一个是更新state的函数。

还有一个需要注意的点，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

const [state, setState] = useState({});
setState(prevState => {
  // 也采用 Object.assign
  return {...prevState, ...updatedValues};
});

二、useEffect

你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。它会在第一次渲染之后和每次更新之后都执行。

useEffect(() => {
    console.log('执行useEffect。。。')
})

但是，在日常开发中每次渲染都会执行effect 可能会导致性能问题，这时我们会用到useEffect 的第二个可选参数。

useEffect(() => {
    console.log('执行useEffect。。。')
}, [ count ])

第二个参数是一个数组，你可以放入一个值、多个值 或者 是个空数组；当是空数组时只会在初始的时候执行，当有值的时候，只要一个更新了就会执行effect。

我们前面说过useEffect 也可以有类似 componentWillUnmount的功能，就需要你return一个函数，React 将会在执行清除操作时调用它。

useEffect(() => {
    console.log('执行useEffect。。。')
    return () => {
      console.log('清除执行effect。。。')
    }
}, [ count ])

三、useContext

Context 主要应用场景在于很多同层级的组件需要访问同样一些的数据，使用 context, 我们可以避免通过中间元素传递 props。

const value = useContext(MyContext); // MyContext是React.createContext 的返回值

当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

import React, { useState, useEffect, useContext } from 'react';
import './App.css';

const MyContext = React.createContext('MyContext')

const Children = () => {
  return (
    <div>
      <Grandson />
    </div>
  )
}

const Grandson = () => {
  const context = useContext(MyContext)
  return (
    <div>
      我是useContext获取的值：{context}
    </div>
  )
}

function App() {
  const [count, setCount] = useState(0)
  console.log('render')
  useEffect(() => {
    console.log('useEffect')
    return () => {
      console.log('清楚执行effect')
    }
  }, [ count ])
  return (
    <div className="App">
      <header className="App-header">
        <h1>{count}</h1>
        <button onClick={() => setCount(x => x + 1)}>+1</button>
        <MyContext.Provider value='Hello MyContext'>
          <Children />
        </MyContext.Provider>
      </header>
    </div>
  );
}

export default App;

上面的例子把我们学习的三个hook都应用到了，通过这个例子也能够更好的理解、掌握。