hooks介绍

hooks是react16.8版本之后的新特性，react团队希望，组件不要变成复杂的容器，最好只是数据流的管道，开发者可以根据需要，组合这些管道即可。组件的最佳写法应该是函数，而不是类。

react是支出函数组件的，只不过写法上有很大的限制，函数必须是纯函数，不能包含状态，也不支持生命周期方法，因为无法取代类。

react hooks的设计目的就是加强版函数组件，完全不使用类，就能写出一个全功能的组件，hooks可以让无状态组件实现有状态组件的部分功能，比如设置state，使用钩子函数：componentDidMount、componentDidUpdate、componentWillUnmount等。

hooks的useState()

在开始的学习中，我们是怎么改变一个变量的值呢，先定义变量，再通过setState进行改变：

state = {
   title: ''
}

this.setState({ title: '首页' });

其中的缺点就不在这里解释了，看看怎么使用hooks来优化这些问题，就以刚刚的例子为示例：

const [title, setTitle] = useState("首页");

useState()函数提供了两个东西给我们，一个是保存状态值的变量，在这个例子中指的是title，另一个是更改变量的函数，在这个例子中指的是setTitle，这个地方其实是使用了数组的结构赋值。

完整用法就是：

import React, { useState } from "react";

function App() {
  const [title, setTitle] = useState("首页");
  function changeTitle() {
    setTitle("hooks");
    console.log(title);
  }
  return (
    <div>
      {title}{" "}
      <button type="button" onClick={changeTitle.bind(this)}>
        改变title
      </button>
    </div>
  );
}

export default App;

正常命名规则就是，title为自定义变量，setTitle就是set+首字母大写的变量名。

hooks的useEffect()

初学阶段，这里就写初学时候怎么用的useEffect()，在刚刚的例子中，我们在changeTitle方法中打印title变量的值，发现还是改变前的值，而不是改变后的值，我们这时候没有获取到变量title的值，那title值怎么获取呢，这时候，我们就使用useEffect()来进行获取。

在页面中引入useEffect()就可以使用了：

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

useEffect(() => {
   console.log(title);
});

复杂的用法，就在之后的学习中再进行学习举例了。

React的学习（八）——hooks的简单使用

hooks介绍

hooks的useState()

hooks的useEffect()