react-(5)useState和useEffect

广告位

useState useState是react中用来管理state的工具,见如下例子。 常规写法 import…

useState

useState是react中用来管理state的工具,见如下例子。

常规写法

import React, { Component } from "react"; class App extends Component {   state = { count: 0 };   setCount = count => {     this.setState({ count: count });   };   render() {     const { count } = this.state;     const setCount = this.setCount;     return (       <div>         <span className="badge badge-secondary m-2">{count}</span>         <button           className="btn btn-primary btn-sm m-2"           onClick={() => setCount(count + 1)}         >           增加         </button>       </div>     );   } }  export default App; 

简化写法

import React, { useState } from "react"; const App = () => {   const [count, setCount] = useState(0);   return (     <div>       <span className="badge badge-secondary m-2">{count}</span>       <button         className="btn btn-primary btn-sm m-2"         onClick={() => setCount(count + 1)}       >         增加       </button>     </div>   ); };  export default App; 

解释

  1. 导入useState
import { useState } from "react"; 
  1. 定义变量名和修改变量的方法名以及变量初始值
const [count, setCount] = useState(0); 

count是我们定义的state变量,setCount是我们定义的一个方法,这个方法用来修改count的值,0代表count变量的初始值是0。

  1. 在render函数中使用变量名和方法

注意方法后面跟一个参数,就是变量要变成的值

useEffect

useEffect用于当状态修改后执行回调函数的。例如当搜索值变化后执行后台搜索的任务。

useEffect的第一个参数是一个函数,代表要执行的方法,第二个参数是可选参数(数组)。当没有第二个参数时每一次渲染都执行函数,如果是一个空数组,那么只有组件第一次渲染的时候执行。

这个数组可以放一些变量名,代表当某些变量变了以后执行函数

每一次渲染都执行

import React, { useState, useEffect } from "react"; const App = () => {   const [count, setCount] = useState(0);   const [count2, setCount2] = useState(0);   //每一次渲染都执行   useEffect(() => {     console.log("useEffect running");   });//没有第二个参数   return (     <div>       <span className="badge badge-secondary m-2">{count}</span>       <button         className="btn btn-primary btn-sm m-2"         onClick={() => setCount(count + 1)}       >         增加       </button>       <br />       <span className="badge badge-secondary m-2">{count2}</span>       <button         className="btn btn-primary btn-sm m-2"         onClick={() => setCount2(count2 + 1)}       >         增加       </button>     </div>   ); };  export default App; 

我们使用useEffect注册了一个箭头函数。目前的作用是当所有数据值发生变化以后执行箭头函数(数据值发生变化指的是我们点击按钮以后触发的count或者count2增加1,render函数执行)。如下

react-(5)useState和useEffect

1.gif

只有组件加载后执行

//第一次组件渲染执行 useEffect(() => {   console.log("useEffect running"); }, []);//第二个参数是一个空数组 
react-(5)useState和useEffect

2.gif

指定值变化后执行

const [count, setCount] = useState(0); const [count2, setCount2] = useState(0); //只有count变量变化以后执行 useEffect(() => {   console.log("useEffect running"); }, [count]);//第二个参数有一个count值 
react-(5)useState和useEffect

3.gif

程序员

关于作者: 程序员

为您推荐

广告位

发表评论