React16.8中Hooks详解

1、React Hooks(钩子)是什么

Introducing Hooks

React哲学：一切皆组件

类组件

class Counter extends Component {
    render () {
        return "Hello World"
    }
}
复制代码

函数组件

const Counter = () => {
    return "Hello World"
}
复制代码

为何说函数式组件更优？

1. 简单易懂
2. 更符合React哲学，能够理解为React就是一个画UI的工具，符合UI=f(state)的原则
3. 函数式编程

有hooks以前，为何React须要类组件？

1. 须要状态（state）

class Counter extends Component {
    state = {
        count: 0
    }
}
复制代码

2. 须要生命周期函数

shouldComponentUpdate () { // 减小render渲染
    return true
}
复制代码

3. 须要反作用操做(非纯函数)

反作用：调用ajax等

纯函数：每次输入的参数同样，那么每次返回的结果都相同。不要改全局变量，不要作ajax请求，不要去作异步操做等

componentDidMount () {
    fetchAPI().then(res => {
        this.setState({count: res})
    })
}
复制代码

可否让函数组件拥有这些功能？

const Counter = () => {
    return `
    想拥有，但是我没办法拥有状态，也没有生命周期函数，更不要说反作用操做了
    `
}
复制代码

Hooks拥有了这些功能

useState 状态管理
useEffect 生命周期函数
useContext 
等等...
复制代码

2、React Hooks带来哪些好处

useState: 在函数中管理状态

const Counter = () => {
    const [count, setCount] = useState(0) // 解构  初始值0
    const increment = () => setCount( count + 1 )
    return (
      <>
        <h1>{count}</h1>
        <button onClick={increment}>+</button>
      </>
    )
}
复制代码

useState的返回值是什么?

const [count, setCount] = useState(0)
能够改成下面的写法：
const state = useState(0)
const count = state[0]
const setCount = state[1]
复制代码

3、经常使用 Hooks 使用技巧

HoC : Higher order Component（With开头）

有了useState这个hook以后，就能够在组件里管理状态了

useState 通常写在函数的最上面
useState:返回结果能够任意取名
const [count, setCount] = useState(0)
也可写成
const  [count, updateCount] = useState(0)

useState是怎么作到的？
想象一下React为每一次useState调用分配一个“空间”
React经过useState调用顺序辨别各个“空间”,很简单，就是经过调用顺序来区分的！
复制代码

useState执行顺序必须一致！

不能写在if判断里，以下

const Counter = () => {
    const [count, setCount] = useState(0)
    if (count % 2 === 0) {
        const [bar, setBar] = useState(null) // 不能这么写
    }
    const [foo, setFoo] = useState("foo")
}


const [count, setCount] = useState(0) // 两个useState 根据调用顺序区分
const [name, setName] = useState("Fruit Bro") // 两个useState 根据调用顺序区分

setCount(count + 1)
setCount也是异步的，是setState的变种！
复制代码

useEffect:有机会作反作用操做

componentDidMount 用于在mount过程结束时的反作用
componentDidUpdate 用于在update过程结束时的反作用

useEffect = componentDidMount + componentDidUpdate
复制代码

useEffect模拟componentDidMount

useEffect(() => {
    // 每次mount或update都会调用到这里
})

useEffect(() => {
    // 只有mount时调用这里
},[]) // []表明依赖的数据
复制代码

useEffect模拟componentDidUnmount

useEffect(() => {
    // 只有mount时调用这里
    return () => {
        // 只有unmount时调用这里
    }
},[])
复制代码

hooks特有而类组件没有的是componentDidUnupdate,相似componentDidUnmount

useEffect模拟componentDidUpdate

const mounted = useRef() // useRef()无论调用多少次，返回的结果彻底是同样的
useEffect(() => {
  if (!mounted.current) { 
  // 初次mounted,其实有用的就是current
      mounted.current = true
  } else {
      // do componentDidUpdate logic
  }
})
复制代码

ref能够访问真正的dom，但在React中，是很是介意直接操做真实DOM的，所以用vitural dom

注意：每一次渲染都有独立的props和state,每一次渲染使用hooks,函数组件的每一次渲染，不管是mount仍是update，无论是第几回update，它都有独立的props和state

const Counter = () => {
    const [count, setCount] = useState(0)
    const onClick = () => {
        setCount(count + 1)
        setTimeout(() => {
        // 返回0的缘由，初次为0，只有再次渲染的时候count才会为1，而每次渲染都有独立的props和state，所以新的渲染不会影响上一次的值
            alert(count) // 0 每一次新的执行就是一次新的开始
        }, 1000)
    }
    return (
      <>
        <h1>{count}</h1>
        <button onClick={onClick}>+</button>
      </>
    )
}
复制代码

useContext: 简化Context的使用

Hooks以前
<Context.Consumer>
  {contextValue => <h1>{contextValue}</h1>}
</Context.Consumer>

Hooks以后
const contextValue = useContext(Context)

<h1>{contextValue}</h1>
复制代码

4、React Hooks有哪些好处

Hooks的好处

1. 下降了组件的复杂性

   1.1 彻底使用函数组件

   1.2 无需生命周期函数

   1.3 更好的状态管理

2. 更好的代码重用性

   2.1 传统的代码重用方式 组件、高阶组件（HoC）、render props模式

   2.2 Hooks下的代码重用方式：函数

定制Hooks: 函数形式的代码重用
// Beacon 计数
const useBeacon = () => {
    const [renderCount, setRenderCount] = useState(0)
    
    useEffect(() => {
        sendBeacon()
    })
}
// 重用
const Foo = () => {
    useBeacon();
    ...
}

const Bar = () => {
    useBeacon();
    ...
}
复制代码

5、如何迁移到Hooks

React v16.8.0开始正式支持Hooks

原有类组件功能依然支持

业界趋势将是向函数组件倾斜

迁移策略

了解Hooks

对新组建使用Hooks

逐步替换原有类组件

hooks如何处理类组件的shouldComponentUpdate来作性能优化 memo

若有错误，欢迎指正！谢谢！