Reactjs 我在哪里可以在react中使用钩子进行 API 调用

发布于11月09日

基本上，我们在React类组件中的componentDidMount()个生命周期方法中进行API调用，如下所示

     componentDidMount(){
          //Here we do API call and do setState accordingly
     }

但是在React v16中引入挂钩之后.7.0，基本上都是功能组件

我的问题是，我们到底需要在哪里对带有钩子的功能组件进行API调用？

我们有没有类似于componentDidMount()的方法？

API调用严格在Mount上进行

try 运行下面的代码并查看结果.

function User() {
  const [firstName, setFirstName] = React.useState(null);
  const [lastName, setLastName] = React.useState(null);
  
  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        const {name} = data.results[0];
        setFirstName(name.first);
        setLastName(name.last);
      });
  }, []); // <-- Have to pass in [] here!

  return (
    <div>
      Name: {!firstName || !lastName ? 'Loading...' : `${firstName} ${lastName}`}
    </div>
  );
}

ReactDOM.render(<User />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

每当某些属性/状态发生变化时调用API

例如，如果您正在显示一个用户的配置文件页面，其中每个页面都有一个userID state/prop，那么您应该将该ID作为一个值传递到第二个参数useEffect中，以便为新的用户ID重新提取数据.componentDidMount在这里是不够的，因为如果您直接从用户a转到用户B的配置文件，组件可能不需要重新安装.

按照传统的上课方式，你会做:

componentDidMount() {
  this.fetchData();
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.id !== this.state.id) {
    this.fetchData();
  }
}

有了钩子，那就是:

useEffect(() => {
  this.fetchData();
}, [id]);

try 运行下面的代码并查看结果. Change the id to 2 for instance to see that useEffect is run again.

function Todo() {
  const [todo, setTodo] = React.useState(null);
  const [id, setId] = React.useState(1);
  
  React.useEffect(() => {
    if (id == null || id === '') {
      return;
    }
    
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(results => results.json())
      .then(data => {
        setTodo(data);
      });
  }, [id]); // useEffect will trigger whenever id is different.

  return (
    <div>
      <input value={id} onChange={e => setId(e.target.value)}/>
      <br/>
      <pre>{JSON.stringify(todo, null, 2)}</pre>
    </div>
  );
}

ReactDOM.render(<Todo />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.8.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.development.js"></script>

<div id="app"></div>

你应该仔细阅读useEffect，以便知道你能/不能用它做什么.