【react】---Hooks的基本使用---【巷子】
一、react-hooks概念
? 二、为什么React中需要类组件 1、需要记录当前组件的状态 ? 三、类组件与Hooks简单对比 类组件 ? import React from "react" export default class App extends React.Component{ constructor(){ super(); this.state = { count:0 } this.handleClick = this.handleClick.bind(this); } render(){ let {count} = this.state; return ( <div> <h2>{count}</h2> <button onClick={this.handleClick}>修改</button> </div> ) } handleClick(){ this.setState({ count:this.state.count+1 }) } } ? hooks import React,{useState} from "react"; export default ()=>{ let [count,setCount] = useState(0); let handleAdd = ()=>setCount(count+1); return ( <div> <h2>{count}</h2> <button onClick={handleAdd}>点击</button> </div> ) } 二者对比之后是不是感觉Hooks简单好多了?那么接下来我们来学习Hooks ? ? 四、Hooks基本使用 ? 1、Hooks常用的方法 ? 2、useState ? ? ? ?前当前的状态值,第 [1]项是可以改变状态值的方法函数。 import React,{useState} from "react" export default ()=>{ let [count,setCount] = useState(0); let addCount = ()=>setCount(count+1); return ( <div> <h2>{count}</h2> <button onClick={addCount}>点击</button> </div> ) } useState : 创建一个状态,这个状态为0 ? 2-1、useState返回的是什么? const [count,setCount] = useState(0); const state = useState(0); const count = state[0]; const setCount = state[1] 注意: 1、useState一定要写在函数初始的位置不能在循环或判断语句等里面调用,这样是为了让我们的 Hooks 在每次渲染的时候都会按照 相同的顺序 调用,因为这里有一个关键的问题,那就是 useState 需要依赖参照第一次渲染的调用顺序来匹配对于的state,否则 useState 会无法正确返回它对于的state 2、我们可以在一个函数组件中使用多个 export default ()=>{ let [count,setCount] = useState(0); let [count,setCount] = useState(0); } 五、useEffect基本使用 (useEffect = componentDidMount + componentDidUpdate+componentWillUnmount) ? 5-1、useEffect ? 5-2、useEffect模拟componentDidMount && componentDidUpdate import React,{useState,useEffect} from "react" export default ()=>{ let [title,setTitle] = useState(0); let updateTitle = ()=>setTitle(title+1); return ( <div> <h2>{title}</h2> <button onClick={updateTitle}>点击</button> </div> ) //参数是一个函数 每次mount 或者 update都会调用当前函数 useEffect(()=>{ document.title = `页面为${count}`; }) }
5-3、如何只在componentDidMount中执行 import React,setTitle] = useState(0); let updateTitle = ()=>setTitle(title+1); return ( <div> <h2>{title}</h2> <button onClick={updateTitle}>点击</button> </div> ) //将第二个参数设置为一个空数组则只会在componentDidMount中执行 useEffect(()=>{ document.title = `页面为${count}`; },[]) } 5-2、useEffect模拟componentWillUnMount useEffect = (()=>{ return ()=>{ //unmount时调用这里 document.removeEventListener(); } },[]) ? 四、useEffect 什么时候执行?? 它会在组件 mount 和 unmount 以及每次重新渲染的时候都会执行,也就是会在 componentDidMount、componentDidUpdate、componentWillUnmount 这三个时期执行 ? 五、hooks的好处 面向生命周期编程变成了面向业务逻辑编程 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |