react的hooks的快速入门教程

一、hooks是什么？

• React 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有
• Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
  如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks
  -凡是 use 开头的 React API 都是 Hooks

二、hooks解决的问题

• 状态逻辑难复用：在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余
• this 指向问题：父组件给子组件传递函数时，必须绑定 this

三、hooks的优势

• 能优化类组件的问题
• 能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）
• 能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
• 副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。而 useEffect 在全部渲染完毕后才会执行，useLayoutEffect 会在浏览器 layout 之后，painting 之前执行。

四、hooks的基本使用

1. useState

useState 唯一的参数就是初始 state
会返回一个数组 一个是值 一个是修改值的函数

// 导入
import React, { useState, useMemo, useCallback } from "react";
// 初始化状态

function App() {
let [num, setNum] = useState(0);

const addNum = ()=>{
	num++
	setNum(num)
}
return (
	<div>
		<h2> {num} </h2>
		<button onClick={addNum}>num+1</button>
	</div>
)
}

3. useMemo
   useMemo 类似vue的计算属性

function App() {
let [num, setNum] = useState(0);

const addNum = ()=>{
	num++
	setNum(num)
}
  const data=useMemo(()=>{
    return '￥'+num* 15
  },[num])
return (
	<div>
		<h2> {num} </h2>
		<button onClick={addNum}>num+1</button>
		<p> {data} </p>
	</div>
)
}

5. useCallback
   useCallback：接收一个内联回调函数参数和一个依赖项数组（子组件依赖父组件的状态，即子组件会使用到父组件的值） ，useCallback 会返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新

function App() {
let [num, setNum] = useState(0);

const addNum = useCallback(()=>{
	num++
	setNum(num)
},[num])
  const data=useMemo(()=>{
    return '￥'+num* 15
  },[num])
return (
	<div>
		<h2> {num} </h2>
		<button onClick={addNum}>num+1</button>
		<p> {data} </p>
	</div>
)
}

五、useEffect

● effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
● 副作用操作可以分两类：需要清除的和不需要清除的。
useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行，该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容

六、react案例 toodList

查看下一篇文章