React入门

一、API

1. useEffect

useEffect()的作用就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。如果设置了第二个参数，及依赖项，则只有依赖项发生改变后，副效应函数才会执行（组件重新渲染不一定执行）

它存在的作用是弥补函数组件没有生命周期的缺点。

2. useRef

useRef的作用是：

• 你可以在重新渲染之间 存储信息（不像是普通对象，每次渲染都会重置，即：写在函数中的普通变量无法在组件生命周期中出储存信息）。
• 改变它 不会触发重新渲染（不像是 state 变量，会触发重新渲染）。
• 对于你的组件的每个副本来说，这些信息都是本地的（不像是外面的变量，是共享的）。

Ref和State都是用来保存组件状态的

二、Hooks

我的理解：hooks就是抽离出公共的函数逻辑（以达到复用的目的），component组件就是抽离出公共的函数逻辑 + UI（以达到复用的目的），hooks就是组件少了UI那部分。

下面这个是React Hooks 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)中的例子，可以很好地帮助理解：如何自定义hooks，什么是hooks

首先是不封装hooks的版本：（这是一个展示个人信息的组件）

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});

  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])

  if (loading === true) {
    return <p>Loading ...</p>
  }

  return <div>
    <p>You're viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

下面我们将「纯函数」之外的部分（即：外部功能、副作用等等）提取出来，封装成单独的逻辑

const usePerson = {personId} => {
  const [loading, setLoading] = useState(true)
  const [person, setPerson] = useState()
  
  useEffect(()=>{
    setLoading(true)
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  },[personId])
  
  return [loading, person]
}

然后，看看应该如何使用自定义hooks

const Person = ({personId} => {
  const [loading, person] = usePerson(personId)
  
  if (loading === true) {
    return <p>Loading ...</p>
  }

  return <div>
    <p>You're viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
})

链接

[轻松学会 React 钩子：以 useEffect() 为例 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html#:~:text=useEffect () 的作用就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。,组件首次在网页 DOM 加载后，副效应函数也会执行。)

React Hooks 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)