React hooks(2)

1. useLayoutEffect

useLayoutEffct与useEffect使用方式一致，都可以执行副作用和清理操作。唯一的不同是执行时机。useEffect不回阻塞浏览的绘制任务，页面更新后执行。useLayoutEffect跟componentDidMount和componentDidUpdate类似，会阻塞浏览器的绘制任务，如果任务执行时间过长，会造成页面空白。

使用场景：根据ui执行DOM操作，绝大多数情况下使用useEffect是一个更好的选择。useLayoutEffect会在页面渲染前执行，保证渲染出来的是最终效果。如果使用了useEffect很可能会因为渲染了2次而出现抖动。

2. useContext

const value = useContext(myContext)

接收一个context对象（React.createContext返回值），并返回该context当前值。当前context的值由上层组件距离当前组件最近的<MyContext.Provider>的value、prop决定。当上层<MyContext.provider>更新时，该Hook会触发重新渲染，并将使用最新传递给MyContext的Provider的contextvalue值。

`useContext`的参数必须是`context`对象本身：

正确： useContext(MyContext)
错误： useContext(MyContext.Consumer)
错误： useContext(MyContext.Provider)

useContext(MyContext)相当于class组件中的static contextType = MyContext或者<MyContext.Consumer>

调用了useContext的组件总会在context的值发生变化时重新渲染。

3. useReducer

useReducer用法跟Redux非常相似。当state的计算逻辑比较复杂或者需要根据以前的值计算新的值时，使用这个Hook会比useState更好。

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

4. useCallback / useMemo / React.memo

useCallback和useMemo的设计初衷时用来做性能优化的。

传统onClick方法，每次重新渲染都会重新绑定事件，解决方式是使用bind或者箭头函数。同样函数组件也有这个问题，React给出的方案是useCallback Hook。它会返回相同的引用，避免子组件进行无意义的重复渲染。

useCallback缓存的是方法的引用，

function Foo() {
  const [count, setCount] = useState(0);

  const memoizedHandleClick = useCallback(
    () => console.log(`Click happened with dependency: ${count}`), [count],
  ); 
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}

而useMemo缓存的则是方法的返回值。

function Parent({ a, b }) {
  // 当 a 改变时才会重新渲染
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // 当 b 改变时才会重新渲染
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

如果想实现class Component的shouldComponentUpdate方法，可以使用React.memo方法，区别是它只能比较props不能比较state。

useRef

Class Component获取ref的方式如下：

class MyComponent extends React.Component {
  constrctor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  componentDidMount() {
    this.myRef.current.focus()
  }
  render() {
    return (
        <input ref={this.myRef} type="text" />
    )
  }
}

Hook实现方式:

function MyComponent() {
  const myRef = useRef(null)
  
  useEffect(() => {
    myRef.current.focus()
  }, [])
  return <input ref={myRef} type="text" />
}

useRef返回一个普通的js对象，可以将任意类型数据存放到current属性里面，就像使用实例化this一样。另外一个使用场景是获取previous props或previous state:

function Counter() {
  const [count, setCount] = useState(0)
  
  const previousRef = useRef()
  useEffect(() => {
    previousRef.current = count
  })
  const previousCount = previousRef.current
  
  return <h1> Now: { count }, Before: { previousCount } </h1>
}

6. 自定义hooks

自定义Hook可以解决复用组件内带逻辑的部分。

自定义Hook是一个函数，是以use开头的，函数内部可以调用其他Hook。

自定义Hook返回在线状态(true or false)

function useFriendStatus(friendId) {
  const [isOnline, setIsOnline] = useState(null)
  
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }
    
    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange)
  
    return () => {
      chatAPI.unsubscrbeToFriendStatus(friendId, handleStatusChange)
    }
  })
  return isOnline
}

使用该自定义Hook

根据在线状态显示在线 离线

function friendStatus(props) {
  const isOnline = useFreindStatus(props.friend.id)
  
    return isOnline ? 'online' : 'offline'
}

显示具体friend信息

function friendInfo(props) {
  const isOnline = useFriendStatus(props.friend.id)
  
  return (
    <li style={isOnline ? 'green' : 'gray'}>
        { props.friend.name }
    </li>
  )
}