8月更文挑战｜Hook使用学习Hook，首先创建一个react的项目，使用create-react-app快速脚手架创

学习Hook，首先创建一个react的项目，使用create-react-app快速脚手架创建。首先安装create-react-app。（node 8.0.0以上版本）

npm install -g create-react-app
create-react-app hook-demo
//之后在项目根目录下运行
npm start

首先是一段Hook的官方简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

其中比较重要的一点是Hook没有破坏性的改动。不是要求React开发者强制使用，那为什么要引入Hook呢？

在组件之间复用状态逻辑很难

这个最直观的感受是，组件化的框架中，对组件的复用性比较大，所以有很多逻辑的测试和维护就是很难的一件事了。使用Hook复用逻辑，可以无需修改组件的结构。

复杂组件变得难以理解

组件化的情况，会导致每个组件的生命周期中的逻辑变得负责。将React与状态管理库结合使用，也会导致程序变得复杂；使用useEffect函数会很好的解决这个问题

难以理解的 class

这个我确实无法理解，可能是需要简化写class泪的一些方法，更好体现React的特性

useState

官方例子：

import React, { useState } from 'react';
function App() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default App;

useState 作为我们学习Hook的第一个函数，作用类似于我们的setState的作用 const [count, setCount] = useState(0);这段代码的含义就是声明一个count变量，有一个setCount方法，默认值是0。通过点击Click me 改变count的值类似于我们之前的写法：

class Example extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>You clicked {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click me
       </button>
     </div>
   );
 }
}

useEffect

你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。在上述代码中加入

  useEffect(() => {   
  document.title = `You clicked ${count} times`;  });

类似于：

  componentDidMount() {    document.title = `You clicked ${this.state.count} times`;  }  componentDidUpdate() {    document.title = `You clicked ${this.state.count} times`;  }

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

componentWillUnmount我们通常来作用是清除掉一些副作用的函数，比如页面中定义啦定时器，会在这个里面做清除操作。那么useEffect同样支持该操作。

useEffect(() => {       

return () => {   //副作用删除操作   });

问题来了，如果有多个操作要在componentDidMount中做包含一些不相关的逻辑，useEffect是支持写多个的。把逻辑分离出来。还有就是componentDidUpdate作用如下：会判断状态的更改来进行更新。

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

useEffect也为我们提供来便利方法，就是它的第二个参数

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行

之后会一直更新有关Hook的学习。one more things

8月更文挑战 ｜Hook使用

在组件之间复用状态逻辑很难

复杂组件变得难以理解

难以理解的 class

useState

useEffect

8月更文挑战｜Hook使用