React Hooks 调研2019-06-04Θ

import React, { useState } from 'react';
export default function Example() {
  const [ count, setCount ] = useState(0);
  const addCounter = () => {
    const newValue = count + 1;
    setCount(newValue);
  };
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={addCounter}>Click me</button>
    </div>
  )
}

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
// 等价于
componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

// Hooks && setInterval
// https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/
import React, { useState, useEffect, useRef } from 'react';
export default function Counter() {
  const [ count, setCount ] = useState(0);
  /**
   * 尝试一
   * React 会在每次渲染后重执行 effects
   * setInterval 执行时会进入到时间队列里，如果频繁的更新 effects, interval 有可能没有机会被执行。
   * 比如给 Counter 外层包装一层定时器，没 100 ms 执行一次，这时候 effects 内部的 interval 不会被执行
  */
  // useEffect(() => {
  //   let id = setInterval(() => {
  //     setCount(count + 1);
  //   }, 10000);
  //   return () => clearInterval(id);
  // });
  /**
   * 尝试二
   * useEffect() 允许“选择性”执行 effects
   * 设定一个依赖数组作为第二个参数， React 只会在数值变化时运行
   * mount 执行 effect，unmount 时清理，传入 []
   * 效果：计时器更新到 1 就不变了
   * 原因：effect 仅执行一次渲染 count 为 0， setInterval 一直引用闭包 count 为 0 。。。
   * 修复方法：
   * 一： setCount(c => c + 1) update 可以更新 state 变量。当时无法更新 props
   * 二： useReducer() 
   */
  // useEffect(() => {
  //   let id = setInterval(() => {
  //     console.log('count', count);
  //     setCount(count + 1);
  //   }, 1000);
  //   return () => clearInterval(id);
  // }, []);
  /**
   * useRef() 返回一个有带有 current 可变属性的普通对象在 renders 间共享，可以保存新的 interval 回调给它：
  */
  useInterval(() => {
    setCount(count + 1);
  }, 1000);
  // 封装 Hook
  function useInterval(callback, delay) {
    const savedCallback = useRef();
    useEffect(() => {
      savedCallback.current = callback;
    });
    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    }, [delay]);
  }
  return <h2>{count}</h2>;
}