useDocumentTitle hook

先创建一个组件，后续再提取和优化。

function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => setCount(count + 1);
  
  useEffect(() => {
    document.title = `Your ${count} clicked times.`;
  }, [count]);
  
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

提取useEffect部分

提取useEffect部分到useDocumentTitle函数中：

function useDocumentTitle(count) {
  useEffect(() => {
    document.title = `Your ${count} clicked times.`;
  }, [count]);
}

function Counter() {
  const [count, setCount] = useState(0);
  useDocumentTitle(count);
  
  const increment = () => setCount(count + 1);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

这种方式还不够有用，需要再优化。

blog.bitsrc.io/writing-you…