⚙️ 框架与构建工具 - React hooks - 《All about FE》

hooks 出现的原因
Rules of hooks
useInterval implementation
函数组件和类组件的区别
拆分组件优化性能
- 方案一：将状态下放
- 方案二：将内容上移
封装自定义网络请求 hooks
useEffect
- 若无法将函数移入 effect 中
useReducer is a cheat mode
useEffect vs useLayoutEffect

hooks 出现的原因

side effects 处理
state 管理
wrapping hell

为函数组件新增了添加和处理自身状态的能力。在类组件和函数组件混用的情况下，若想对组件增加自身状态管理能力，就不得不将其重构成类组件，反之亦然。在类组件中，副作用的产生和处理都是由生命周期函数带来的。副作用可以是在 React 中请求数据或者与浏览器 API 交互。通常这些副总用都伴有创建和清除两个阶段。React Hooks 的出现解决了上述两个问题，并且让组件之间的交互更为流畅。使用 useEffect 来处理副作用，使用 useState 来为组件创建状态。

Q: React 清除 effect 的确切时间是什么时候？
当组件卸载时，React 会执行清除操作。但实际情况是，每次渲染的时候 effects 都会执行一次，同时清除操作也会在 effect 执行之前执行一遍。

Rules of hooks

只在最顶层调用 hooks。不要在循环结构，条件判断或嵌套函数中进行调用。
只在 React 函数中调用 hooks：

从 React 函数式组件中调用
从自定义 hooks 中调用

useInterval implementation

import React, { useState, useRef } from 'react'
function useInterval(callback, delay) {
    const [delay, setDelay] = useState(delay)
  const savedCallback = useRef()
  useEffect(() => {
      savedCallback.current = callback
  }, [callback])
  function tick() {
      savedCallback.current()
  }
  useEffect(() => {
      const id = setInterval(tick, delay)
    return () => clearInterval(id)
  }, [delay])
}

useRef可以返回一个含有 current属性的对象，这个对象可以在渲染过程中进行共享。用此特性将最新的 callback进行存储，然后他就会一直执行第一个 setInterval函数，来实现数字的变更。

函数组件和类组件的区别

// class
class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };
  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };
  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}
// inside render function
class ProfilePage extends React.Component {
  render() {
    // Capture the props!
    const props = this.props;
    // Note: we are *inside render*.
    // These aren't class methods.
    const showMessage = () => {
      alert('Followed ' + props.user);
    };
    const handleClick = () => {
      setTimeout(showMessage, 3000);
    };
    return <button onClick={handleClick}>Follow</button>;
  }
}
// functional
function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };
  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };
  return (
    <button onClick={handleClick}>Follow</button>
  );
}

在 React 中，props是不可变的，而 this 却是可修改的。在上述的例子中，我们过了3秒才重新去调取 this.props.user这个值，此时我们取到的是一个当前值而不是点击按钮时的那个值。

以上的问题，我们可以通过 JS 的闭包来解决，在闭包中存的 props 值是不可变的，我们也没有用其他的方法对其进行修改。这样我们就获取到了在渲染的当前时间点的 props。

Closures are often avoided because it’s hard to think about a value that can be mutated over time. But in React, props and state are immutable.

如果我们想要获得最新的值，在函数式组件中可以使用 useRef，它会创建一个包含 current属性的对象。而这个对象是可变的，我们可以手动的操作这个对象的值。

function MessageThread() {
  const [message, setMessage] = useState('');
  // Keep track of the latest value.
  const latestMessage = useRef('');
  useEffect(() => {
    latestMessage.current = message;
  });
  const showMessage = () => {
    alert('You said: ' + latestMessage.current);
  };
  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };
  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };
  return (
    <>
      <input value={message} onChange={handleMessageChange} />
      <button onClick={handleSendClick}>Send</button>
    </>
  );
}

拆分组件优化性能

import { useState } from 'react';
export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}
function ExpensiveTree() {
  let now = performance.now();
  while (performance.now() - now < 100) {
    // Artificial delay -- do nothing for 100ms
  }
  return <p>I am a very slow component tree.</p>;
}

我们通过认为的方式引入了一个计算量非常大的组件。为了对组件性能进行优化，我们可以有两种方式来进行优化。

方案一：将状态下放

export default function App() {
  return (
    <>
      <Form />
      <ExpensiveTree />
    </>
  );
}
function Form() {
  let [color, setColor] = useState('red');
  return (
    <>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
    </>
  );
}

通过拆分，将计算量大的组件作为单独的组件进行引入，不需要在 color 发生变更的时候进行重新计算。

方案二：将内容上移

若实际组件是下图这样的情况，我们就不能简单通过拆分的方式来进行优化

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

我们可以将<Expensive />组件当作参数来进行传入：

export default function App() {
  return (
    <ColorPicker>
      <p>Hello, world!</p>
      <ExpensiveTree />
    </ColorPicker>
  );
}
function ColorPicker({ children }) {
  let [color, setColor] = useState("red");
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  );
}

封装自定义网络请求 hooks

先来分析，要完成一个网络请求需要哪些步骤，哪些请求状态。
网络请求发起者、网络请求状态、错误处理

import React, { useState, useEffect } from 'react'
import axios from 'axios'
function useFetch(initUrl, initData) {
  const [data, setData] = useState(initData)
  const [url, setUrl] = useState(initUrl)
  const [isLoading, setIsLoading] = useState(false)
  const [isError, setIsError] = useState(false)
  useEffect(() => {
    const fetchData = async () => {
      setIsError(false)
      setIsLoading(true)
      try {
        const result = await axios(url)
        setData(result.data)
      } catch (error) {
        setIsError(true)
      }
      setIsLoading(true)
    }
    fetchData()
  }, [url])
  return [{ data, isLoading, isError }, setUrl]
}

函数 fetchData是作为数据流的一部分，要将其放置于 useEffect内部。
对 useFetch 的使用：

function App() {
  const [query, setQuery] = useState('redux')
  const [{ data, isLoading, isError }, doFetch] = useFetch('https://github.com/search?q=react', { hits: [] })
  return (
    <>
      <form onSubmit={evt => {
        doFetch(`https://github.com/search?${query}`)
        evt.preventDefault()
      }}>
        <input type="text" value={query} onChange={event => setQuery(event.target.value)}></input>
        <button type="submit">Search</button>
      </form>
      {isError && <div>Something went wrong...</div>}
      {isLoading ? (
        <div>Loading...</div>
      ): (
        <ul>
          { data.hits.map(item => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          )) }
        </ul>
      )}
    </>
  )
}

输入框 input 用于获取即时输入的 query 值的变化，而 setUrl 用于发起新的请求。将 url 作为 useEffect 的依赖项，仅当 url 发生变化的时候才会重新发起请求。而 isLoading 和 isError 用于表示发起请求过程中的中间状态。包括加载状态和是否加载成功。

我们可以进一步使用 useReducer 来对不同的状态来进行抽象。

const dataFetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return { ...state, isLoading: true, isError: false };
    case 'FETCH_SUCCESS':
      return {
        ...state,
        isLoading: false,
        isError: false,
        data: action.payload,
      };
    case 'FETCH_INIT':
      return { ...state, isLoading: false, isError: true };
    default:
      throw new Error('fetch error')
  }
};
function useFetch(initUrl, initData) {
  const [url, setUrl] = useState(initUrl)
  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initData,
  });
  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' });
      try {
        const result = await axios(url);
        dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
      } catch (error) {
        dispatch({ type: 'FETCH_FAILURE' });
      }
    };
    fetchData();
  }, [url]);
  return [state, setUrl];
}

添加 abort data 的情况

function useFetch(initUrl, initData) {
  const [url, setUrl] = useState(initUrl)
  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initData,
  });
  useEffect(() => {
    let didCancel = false
    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' })
      try {
        const result = await axios(url);
        if (!didCancel) {
            dispatch({ type: 'FETCH_SUCCESS', payload: result.data })
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({ type: 'FETCH_FAILURE' })
        }
      }
    };
    fetchData()
    return () => {
        didCancel = true
    }
  }, [url])
  return [state, setUrl]
}

当 url 再次发生变化的时候，使用 useEffect 清除上一次发起的请求，通过一个 didCancel 标识变量来进行控制。

useEffect

Functions are part of the data flow.

function Example({ someProp }) {
    function doSomething() {
      console.log(someProp)
  }
  useEffect(() => {
      doSomething()
  }, []) // 这是非常不安全的 🔐
}

如上例，在 useEffect 中调用 doSomething 函数，而在其中调用了 someProp。在 effect 的外部是很难去记忆哪个 props 或 state 是被函数调用的。所以需要把在 effect 内部用到的函数要定义到 effect 的内部。这样书写的话很容易看出 effect 依赖了组件作用域中的哪个值。

function Example({ someProp }) {
  useEffect(() => {
    function doSomething() {
      console.log(someProp);
    }
    doSomething();
  }, [someProp]); // ✅ OK (our effect only uses `someProp`)
}

如果我们不依赖组件作用域中的任何值，那么将依赖项留空就是恰当的：

useEffect(() => {
  function doSomething() {
    console.log('hello');
  }
  doSomething();
}, []); // ✅ OK in this example because we don't use *any* values from component scope

如果在 useEffect 中设置一列依赖项，那么这些依赖项必须包括所有在回调函数中使用过和参与到 React 数据流的值。包括 props，state 和任意由其衍生出来的任何东西。

只有当一个函数没有引用任何 props，state 或衍生值的时候，忽略此依赖才是合理的。

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);
  useEffect(() => {
    // By moving this function inside the effect, we can clearly see the values it uses.
    async function fetchProduct() {
      const response = await fetch('http://myapi/product/' + productId);
      const json = await response.json();
      setProduct(json);
    }
    fetchProduct();
  }, [productId]); // ✅ Valid because our effect only uses productId
  // ...
}

若使用了任何数据，则需要在 dependency list 中标明。我们将函数写入了 effect 内部，所以不需要将其写进依赖表中。

若无法将函数移入 effect 中

将函数移出组件
将函数用 useCallback 进行包裹，然后再将其放入依赖项中 ```javascript function getFetchUrl(query) { return ‘https://hn.algolia.com/api/v1/search?query=‘ + query }

function SearchResults() { useEffect(() => { const url = getFetchUrl(‘react’) }, []) }

如果一个函数不使用组件作用域中的任何东西，那么你可以将它移出组件，然后就可以在 effets 中进行自由的使用了。不需要将其放置于 deps 中，因为它并不在渲染作用域而且不会被数据流所影响。它不会突然依赖 porps 或者 state.
```javascript
function ProductPage({ productId }) {
  // ✅ Wrap with useCallback to avoid change on every render
  const fetchProduct = useCallback(() => {
    // ... Does something with productId ...
  }, [productId]); // ✅ All useCallback dependencies are specified
  return <ProductDetails fetchProduct={fetchProduct} />;
}
function ProductDetails({ fetchProduct }) {
  useEffect(() => {
    fetchProduct();
  }, [fetchProduct]); // ✅ All useEffect dependencies are specified
  // ...
}

在上面的例子中，我们需要将函数写在依赖项中。这样可以确保当 productId 发生变化的时候，ProductPage 会自动触发一个在 ProductDetails 中的重取(refetch)操作。

使用 **useCallback** ，函数可以完全参与到整个数据流当中。如果函数输入发生改变，那么函数本身也发生了改变，反之，它保持不变。

useReducer is a cheat mode

dispatch identity is guaranteed to be stable between re-renders.

所以可以将 dispatch 从依赖项中排除，因为它不会导致重渲染。

You may be wondering: how can this possibly work? How can the reducer “know” props when called from inside an effect that belongs to another render? The answer is that when you dispatch, React just remembers the action — but it will call your reducer during the next render. At that point the fresh props will be in scope, and you won’t be inside an effect.

This is why I like to think of useReducer as the “cheat mode” of Hooks. It lets me decouple the update logic from describing what happened. This, in turn, helps me remove unnecessary dependencies from my effects and avoid re-running them more often than necessary.

React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

当你有包含多个子值的复杂状态逻辑的时候，或者下一个状态依赖于上一个状态的值，这时候使用 useReducer 是优于 useState 的。
当触发深更新(deep update)的时候，使用 useReducer 也可以帮助你优化性能，因为你可以将 dispach 向下传导而非 callback 。

useState, useReducer 和 useContext 的异同

useState: 简单状态
useReducer: 复杂状态
useContext: 全局状态

useEffect vs useLayoutEffect

两者的区别主要是在于运行时间。
useEffect 异步执行，在渲染被绘制到屏幕上之后才会执行。

触发渲染（修改状态或者父级重渲染）
React 渲染你的组件（对其进行调用）
屏幕视觉上发生了更新
useEffect 执行

与之相反的是，useLayout 是同步执行的，在渲染之后和屏幕更新之前

触发渲染（修改状态或者父级重渲染）
React 渲染你的组件（对其进行调用）
useLayoutEffect 执行，React 等候他执行完
屏幕视觉上发生更新 ```javascript import React, { useState, useEffect } from “react”; import ReactDOM from “react-dom”; import “./styles.css”;

const BlinkyRender = () => { const [value, setValue] = useState(0);

useEffect(() => { if (value === 0) { setValue(10 + Math.random() * 200); } }, [value]);

console.log(“render”, value);

return (

setValue(0)}>value: {value}

); };

ReactDOM.render( , document.querySelector(“#root”) );

在上述的例子中执行顺序是这样的：
1. value 置为 0
2. 触发组件渲染
3. 页面显示为 0
4. useEffect 执行，value 置为 random 值，重新执行1-4步骤
```javascript
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const BlinkyRender = () => {
  const [value, setValue] = useState(0);
  useLayoutEffect(() => {
    if (value === 0) {
      setValue(10 + Math.random() * 200);
    }
  }, [value]);
  console.log("render", value);
  return (
    <div onClick={() => setValue(0)}>value: {value}</div>
  );
};
ReactDOM.render(
  <BlinkyRender />,
  document.querySelector("#root")
);

而上面的例子的执行是这样的：

value 置 0
触发渲染，React 渲染组件
useLayoutEffect 执行，value 置为 random 值
页面绘制此值

在绝大多数的场景中，使用 useEffect 是正确的选择。如果你的代码导致页面闪烁，然后再换到 useLayoutEffect 。由于 useLayoutEffect 是同步的，所以它存在阻塞页面的可能，会导致性能问题。