React Hooks 入门教程【阮一峰】

标签：const Hooks React 一峰钩子组件 return useEffect

组件类的缺点

React 的核心是组件。早前版本，组件的标准写法是类。

// 一个简单的组件类
import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

组件类的缺点：
- 大型组件很难拆分和重构，也很难测试。
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
- 组件类引入了复杂的编程模式，比如 render props 和高级组件。

函数组件

React 团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。
```
// 函数组件的例子
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
函数组件的限制：必须是纯函数，不能包含状态，也不支持生命周期方法，无法取代类
React Hooks 的设计目的，就是加强版函数组件，完全不使用“类”，就可写出全功能的组件。

Hook 的含义

React Hooks 的意思：组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。
既可使用 React 官方提供的常用钩子（如 useState、useContext、useReducer、useEffect），也可以封装自己的钩子。
所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用 use 前缀命名，便于识别。使用xxx功能，钩子就命名为 usexxx。

useState()：状态钩子

useState() 用于为函数组件引入状态，纯函数不能有状态，所以把状态放在钩子里面。
useState() 这个函数接受状态的初始值，作为参数；然后返回一个数组，数组第一个成员是一个变量，指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是 set 前缀加上状态的变量名。

useContext()：共享状态钩子

useContext() 可以在组件之间共享状态

// 第一步就是使用 React Context API，在组件外部建立一个 Context。
const AppContext = React.createContext({});
// 组件封装
<AppContext.Provider value={{
  username: 'superawesome'
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

上面代码中，AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。

// Navbar 组件
const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}
// Message 组件
const Messages = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

上面代码中，useContext()钩子函数用来引入 Context 对象，从中获取username属性。

useReducer()：action 钩子

React 本身不提供状态管理功能，通常需要使用外部库，这方面最常用的库是 Redux。
- Redux 的核心概念：组件发出 action 与状态管理器通信，状态管理器收到 action 以后，使用 Reducer 函数算出新的状态
- Reducer 函数形式： (state, action) => newState

useReducer() 钩子用来引入 Reducer 功能。

const [state, dispatch] = useReducer(reducer, initialState);

useReducer() 的基本用法：接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。

// 用于计算状态的 Reducer 函数
const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

// 组件代码
function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: 'countUp' })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

由于 Hooks 可以提供共享状态和 Reducer 函数，所以它在这些方面可以取代 Redux。它目前无法取代的是：提供中间件（middleware）和时间旅行（time travel）。

useEffect()：副作用钩子

useEffect() 用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前放在 componentDidMount 里面的代码，现在可以放在 useEffect()。
```
useEffect(()  =>  {
  // Async Action
}, [dependencies])
```

useEffect() 接受两个参数，第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect() 就会执行。（第二个参数可以省略，这时每次组件渲染时，就会执行 useEffect() ）。

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>
}

上面代码中，每当组件参数personId发生变化，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。

创建自己的 Hooks

可以把 Hooks 代码封装成一个自定义的 Hook，便于共享。

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];
};

上面代码中，usePerson()就是一个自定义的 Hook。

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>
  );
};

Person 组件就改用这个新的钩子，引入封装的逻辑。

标签：const,Hooks,React,一峰,钩子,组件,return,useEffect
From： https://www.cnblogs.com/yhstsy/p/18179199