react hooks入门具体教程

import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); //count:声明的变量;setCount:改变count值的函数;0:count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

useState是react自带的一个hook函数,它的浸染就是用来声明状态变量。useState这个函数吸收的参数是我们的状态初始值(initial state),它返回了一个数组,这个数组的第[0]项是当前当前的状态值,第[1]项是可以改变状态值的要领函数。
所以我们做的工作其实就是,声明白一个状态变量count,把它的初始值设为0,同时提供了一个可以变动count的函数setCount。

当用户点击按钮时,我们挪用setCount函数,这个函数吸收的参数是修悔改的新状态值。接下来的工作就交给react了,react将会从头渲染我们的Example组件,

如果一个组件有多个状态值怎么办?
首先,useState是可以多次挪用的,所以我们完全可以这样写:

function ExampleWithManyStates() { const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); }

其次,useState吸收的初始值没有划定必然要是string/number/boolean这种简朴数据范例,它完全可以吸收工具可能数组作为参数。独一需要留意的点是,之前我们的this.setState做的是归并状态后返回一个新状态,而useState是直接替换老状态后返回新状态。

hook,一方面它是直接用在function傍边,而不是class;另一方面每一个hook都是彼此独立的,差异组件挪用同一个hook也能担保各自状态的独立性。

react是怎么担保多个useState的彼此独立的?

谜底是,react是按照useState呈现的顺序来定的。我们详细来看一下

//第一次渲染 useState(42); //将age初始化为42 useState('banana'); //将fruit初始化为banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState(42); //读取状态变量age的值(这时候传的参数42直接被忽略) useState('banana'); //读取状态变量fruit的值(这时候传的参数banana直接被忽略) useState([{ text: 'Learn Hooks' }]); //...

react划定我们必需把hooks写在函数的最外层,不能写在ifelse等条件语句傍边,来确保hooks的执行顺序一致。

Effect Hooks

案例:

import { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // 雷同于componentDidMount 和 componentDidUpdate: useEffect(() => { // 更新文档的标题 document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

如果不消hooks,我们会怎么写?

class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } }

我们写的有状态组件,凡是会发生许多的副浸染(side effect),好比提倡ajax请求获取数据,添加一些监听的注册和打消注册,手动修改dom等等。我们之前都把这些副浸染的函数写在生命周期函数钩子里,好比componentDidMount,componentDidUpdate和componentWillUnmount。而此刻的useEffect就相当与这些声明周期函数钩子的荟萃体。它以一抵三。

useEffect怎么解绑一些副浸染?

传给useEffect的副浸染函数返回一个新的函数即可。这个新的函数将会在组件下一次从头渲染之后执行。

import { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 必然留意下这个顺序:汇报react在下次从头渲染组件之后,同时是下次挪用ChatAPI.subscribeToFriendStatus之前执行cleanup return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }

怎么跳过一些不须要的副浸染函数?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsjyzx.html