整理下react.hooks

React HOOKS

整理内容
来自B站eeerinzhang https://www.bilibili.com/video/BV1JE411f7kV?t=838
阮一峰博客hooks

开发流程(改一个class类为函数hooks)

1.import {useState} from React

2.class 改const ,传入props

3.去掉render

4.this.state 改key名
setState写为 set+{key名} (改后的方法,如setSide,setDestroyed)

5.方法前面加const,引用的时候不需要写this

componentDidMount()与useEffect做的事情是一样的
useEffect第二个参数是[],里面的东西更新了后才会重新执行下一遍,没有loop的问题,但是第一遍还是被执行的

-阮一峰笔记

useState()：状态钩子

简单点说就是放状态的

useContext()：共享状态钩子

const AppContext = React.createContext({});
-----------------------------------
<AppContext.Provider value={{
  username: 'superawesome'
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

---------------------------------------------------
const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

useReducer()：action 钩子

由于 Hooks 可以提供共享状态和 Reducer 函数，所以它在这些方面可以取代 Redux。但是，它没法提供中间件（middleware）和时间旅行（time travel），

useEffect();处理副效应

useEffect()是函数,
第二个参数是数组[],如果是非空变量,该变量变化,才会执行,如果是空数组,进入DOM后只执行一次

useEffect()的用途
获取数据（data fetching）
事件监听或订阅（setting up a subscription）
改变 DOM（changing the DOM）
输出日志（logging）

useEffect() 的返回值
useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。

useEffect() 的注意点
多个副效应，应该调用多个useEffect()