react hooks学习总结

学完这个，react就告一段落了。

react hooks解决的问题：

1.函数式组件不能使用state

之前只能用于一些简单而无交互的场景。

2.副作用的问题。

通常数据的获取、订阅或者手动修改React DOM这些行为，我们成为副作用；

 

react提供useEffect 这个API来处理组件的副作用问题。

取代了componentDidMount，componentDidUpdate和componentWillUnmount这几个生命周期。

 

3.解决代码复用的问题。

4.复杂的状态管理

useReducer、useContext

5.效率和质量

代码更简洁

 

useState

import React from "react";

import { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p> 你点击了 {count}次 </p>{" "}
      <button onClick={() => setCount(count + 1)}> 增加 </button>{" "}
    </div>
  );
};

export default Example;

useEffect

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

const Example = () => {
  const [count, setCount] = useState(0);
    useEffect(()=>{
document.title=`你点击了 ${ count }次`;
	})

在第一个参数callback中返回一个函数，用于清理工作；

    useEffect(()=>{
return ()=>{
//清理工作，类似于componentWillUnmount
}
	})

    useEffect(()=>{
document.title=`你点击了 ${ count }次`;
	},[])//只渲染一次，相当于componentDidMount



    useEffect(()=>{
document.title=`你点击了 ${ count }次`;
	},[count])//相当于componentDidMount，componentDidUpdate，count改变才变化

//useEffec可以执行多次；


  return (
    <div>
      <p> 你点击了 {count}次 </p>{" "}
      <button onClick={() => setCount(count + 1)}> 增加 </button>{" "}
    </div>
  );
};

export default Example;