React中useEffect的简单使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

学习hooks

在 React 的世界中，组件有函数组件和类组件 UI 组件我们可以使用函数，用函数组件来展示 UI。而对于容器组件，函数组件就显得无能为力。我们依赖于类组件来获取数据，处理数据。 React 在 v16.8 的版本中推出了 React Hooks 新特性。以前我们更改数据都是通过setState。现在我们可以使用 useState

在函数组件中用useState更改数据状态

import { useState } from "react"; export default function Funcom() { // setName可以去改变name的值 const [name, setName] = useState('紫川') // 改变name的值 function changeValue() { setName('今天在追剧,爽歪歪') } return ( <div> <button onClick={changeValue}>改变值</button> <div>显示的值--{name}</div> </div> ) }

往数组中新增一个值

import { useState } from "react"; export default function Funcom() { // setName可以去改变name的值 const [list, setList] = useState([{ name: '紫川秀', id: 1 }, { name: '斯特林', id: 2 }]) let obj= { name: '紫川-秀字营', name2: '斯特林-哇哇' } // 改变name的值 function addHandler() { // 新增值的方式,通过扩展你运算的方式，将新值进行追加 setList([...list, { name:'帝林',id:3 }] ) } return ( <div> <button onClick={addHandler}>新增值</button> <ul> { list.map(item => <li key={item.id}> {item.name }</li>) } </ul> </div> ) }

做一个add del的小案例

import { useState } from "react"; export default function Funcom() { const [list, setList] = useState([{ name: '紫川秀', id: 1 }, { name: '斯特林', id: 2 }]) let [text, setText] = useState('') // 保存用户当前输入的值 function changeValue(e) { setText(e.target.value) } // 添加数值 function addHandler() { setList([...list, { name: text, id: Math.random(0, 1000000000) }]) // 清空值，使用 value={ text}进行绑定就可以了 setText('') } // 删除方法 function delHandler(index) { let newlist = [...list] newlist.splice(index, 1) setList(newlist) } return ( <div> <input type="text" onChange={changeValue} value={ text} /> <button onClick={addHandler}>新增值</button> <ul> { list.map((item,index) => <li key={item.id}> <span>{item.name}</span> <button onClick={() => { delHandler(index)}}>删除</button> </li>) } </ul> </div> ) }

useEffect(处理副作用)和useLayoutEffect(同步执行副作用)

Function Component 不存在生命周期所以不要把class Component的生命周期的概念搬过来对号入座

useEffect的简单使用

import { useState } from "react"; import axios from 'axios' export default function Funcom() { const [list, setList] = useState([]) axios.get('https://edu.xxxx.cn/ccc.php').then(res => { console.log(res.data) let backArr =res&&res.data || [] setList(backArr) }) return ( <div> <ul> { list.map((item, index) => <li key={index}> <span>{item.title}</span> </li>) } </ul> </div> ) }我们发现数据一直在跟新。代码一直在请求数据。怎么会这样了？我现在来说不清楚，那怎么解决呢？使用 useEffect

简单使用 useEffect

import { useEffect, useState } from "react"; import axios from 'axios' export default function Funcom() { const [list, setList] = useState([]) // useEffect的第一个参数是一个函数，第二个是数组。表示依赖的状态，空数组表示没有依赖 // 这样就不会一直执行了 useEffect(() => { axios.get('https://edu.xxx.cn/zzzz.php').then(res => { console.log(res.data) let backArr = res && res.data || [] setList(backArr) }) },[]) return ( <div> <ul> { list.map((item, index) => <li key={index}> <span>{item.title}</span> </li>) } </ul> </div> ) }

useEffect依赖跟新

import { useEffect, useState } from "react"; export default function Funcom() { const [name, setName] = useState('zhang') useEffect(() => { // 将首字母大写 setName(name.substring(0,1).toUpperCase()+name.substring(1) ) }, []) function changeValue() { setName('xiaoming') } return ( <div> <h2>姓名：{ name }</h2> <button onClick={changeValue}>改变</button> </div> ) }我们想的是 name的值发生改变后。也会将 name.substring(0,1).toUpperCase()+name.substring(1)执行一次但是实际上却没有，而是直接赋值了变成了 xiaoming 我们希望的是Xiaoming

使用依赖后

import { useEffect, useState } from "react"; export default function Funcom() { const [name, setName] = useState('zhang') // 第一次执行一次。之后name(依赖)发生改变之后也会更新 useEffect(() => { // 将首字母大写 setName(name.substring(0,1).toUpperCase()+name.substring(1) ) //依赖的值name发生改变后， setName(name.substring(0,1).toUpperCase()+name.substring(1) )会又执行一次 }, [name]) function changeValue() { setName('xiaoming') } return ( <div> <h2>姓名：{ name }</h2> <button onClick={changeValue}>改变</button> </div> ) }