[铁人赛 Day14] 来读 Hooks FAQ 文件－lifecycle methods 如何对照到 Hooks？

lifecycle methods 如何对照到 Hooks？

constructor：Function component 不需要使用 constructor 来初始化 state，而是使用 useState。如果运算初始状态会花费太多力气，你可以尝试传递一个 function 给 useState。

getDerivedStateFromProps ：这个方法会在 call render method 之前运行，在初始的 mounting 以及接下来的更新都会触发，会 return 一个物件来更新状态，实作的情境不多，通常是当状态需要随着 props 中的改变而改变的情境。

在 Hook 当中，会使用他的情境也是非常稀少，以下是替代 getDerivedStateFromProps 的实作案例。你可以在 rendering 进行的时候更新状态，React 会在结束第一次 render 之後，立刻使用更新过的状态重新跑一次元件，藉此节省效能。（案例原文在此 https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops）

// 以下是个侦测使用者是否正在往下滑动页面的功能
function ScrollView({row}) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  const [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    setIsScrollingDown(prevRow !== null && row > prevRow);
		// 我们把 row 的状态储存在 state 里，所以可以比较滑动的位置是否有改变
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

shouldComponentUpdate：你可以把 function component 包在 React.memo 里，来比较 props 是否改变（shallowly）。

const Button = React.memo((props) => {
  // your component
});

render： 就是 function component 的 body

componentDidMount, componentDidUpdate, componentWillUnmount： useEffect 可以呈现所有这些方法的结合。

// 跟 componentDidMount + componentDidUpdate 很类似：
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

即使是比较稀少的情境，例如只在 updates 的时候 run effect，也可以透过 mutable ref 来手动储存代表是否是在第一次 render 的 boolean value。

// 以下是参考 stackoverflow 上讨论的写法，非文件里提供
// 使用 ref 来储存 render 的次数（不使用 useState 来储存以避免多余的 render）
const isFirstRender = useRef(true);

useEffect(() => {
  if (isFirstRender.current) {
     isFirstRender.current = false;
  } else {
      // 如果不是首次 render，则运行以下的 code
			// ....
  }
});

Hooks 里面有类似 instance variables （实例变数）的东西吗？

useRef() 不只可以用在 DOM 上面，ref 物件是一个含有 current property 的容器，而 current 是 mutable 的，可以储存任何 value，跟 class 里头的实例变数概念很像。（不过你应该要避免在 render 的时候设定 ref，比较好的地方是 event handlers 和 effect）

ref
https://reactjs.org/docs/hooks-faq.html
https://stackoverflow.com/questions/55075604/react-hooks-useeffect-only-on-update