组件类的几个缺点。

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

hooks的由来

• react早期的函数组件，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。
• React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。
• 组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

常用钩子

useState()：状态钩子

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

import React, { useState } from "react";
export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }
  return  <button  onClick={handleClick}>{buttonText}</button>;
}

useContext()：共享状态钩子

// app.js
<AppContext.Provider value={{
  username: 'superawesome'
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>
// 创建一个context
<script>
const AppContext = React.createContext({});
</script>
// navbar.js
<script>
const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>{username}</p>
    </div>
  )
}
</script>
// messages.js
<script>
const Messages = () => {
  const { username } = useContext(AppContext)
  return (
    <div className="messages">
      <p>1 message for {username}</p>
    </div>
  )
}
</script>

useReducer()：action 钩子

// reducer.js
const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}
// app.js
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>
  );
}

useEffect()：副作用钩子

• useEffect()用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前，放在componentDidMount里面的代码，现在可以放在useEffect()。
• 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>
  )
}