React-hooks

Posted 2021-03-07 ceceliahappycoding

React Hooks: let you use React without classes.（对于已有的使用class定义的React组件，官方不推荐全部重写。可将react hooks用于新创建的React组件）。

使用class定义React component有什么弊端：a. this指向不明确； b. 定义的handle函数需要bind

1. useState:接受的唯一参数为初始化的state值（仅在首轮render中被使用，不一定是object类型）。 返回一对参数：第一个为当前的state，第二个为其更新函数。

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState(‘banana‘);
  const [todos, setTodos] = useState([{ text: ‘Learn Hooks‘ }]);
  // ...
}

这里，与使用class定义的component在写法上进行对比。

class Example extends React.Component {
    constructor (props) {
        super(props);
        this.setState = {
            age: 42,
            fruit: ‘banana‘,
            todos: [{ text: ‘React Hooks‘ }]
        };
    }
    render () {
        return ....
    }
}

 

2. useEffects

何为effects(效应)？affect other components and can’t be done during rendering.如fetch data, subscribe, manually changing the DOM.

useEffects起到了与React classes中 componentDidMount, componentDidUpdate, componentWillUnmount相同的作用，但只不过是统一于一身。React默认是在每次render之后去调用effects函数。（包括首轮render）

import React, { useState, useEffect } from ‘react‘;

function Example() {
  const [count, setCount] = useState(0);
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. 使用hooks的规则

4. 使用自定义hooks，特点：1. 以use开头 2. 在其中调用其他hooks

作用： 重用状态逻辑（stateful logic)

import React, { useState, useEffect } from ‘react‘;

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
    // 传入props后，isOnline被设为true.
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
    // 返回
  return isOnline;
}

在两个组件中重用。

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return ‘Loading...‘;
  }
  return isOnline ? ‘Online‘ : ‘Offline‘;
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? ‘green‘ : ‘black‘ }}>
      {props.friend.name}
    </li>
  );
}

 

5. 其他内置hooks API

5.1 useContext

5.2 useReducer