江苏龙网

  1. 主页 > 生活百科 > >

给新手看的 React Hooks 教程( 二 )

React Hooks


<h1>{this.state.count}</h1>你会发现 ， 我们再也不需要关注 this 的使用了 ， 这使我们的编码工作变得更加轻松了 。
比如 ， 当你没定义 {count} 的时候 ， VS Code编辑器直接就给你报警告了 ， 你就更早的发现错误 。但是在运行代码之前 ， VS Code 可不会知道 {this.state.count} 是不是定义了 。
我们继续往下看
<button onClick={() => setCount(count + 1)}>Click to Increment</button>在这行代码中 ， 我们使用 setCount 函数来更改 count 变量 。
单击按钮的时候 ， 我们把 count 变量更新为1 。由于状态变化 ， 因此会触发视图重新渲染 ， React 会用新的 count值为我们更新视图 。真香！
那我怎么给数据一个初始值呢？您可以通过给useState()传递参数来设置初始状态 。可以是一个硬编码的值：
const [count, setCount] = useState(0);或者你也可以用 props 传进来的值作为初始值：
const [count, setCount] = useState(props.initialValue);不论你的props.initialValue是啥 ， 都会赋值给 count 作为初始值 。
总结一下：useState 最爽的地方在于 ， 你可以像使用正常变量、函数一样处理你的状态 。
那如果我有多个状态数据咋办?这是就是Hooks另外一个牛逼的地方了 ， 在组件里 ， useState你想用多少次 ， 就用多少次：
const [count, setCount] = useState(props.initialValue); const [title, setTitle] = useState("This is my title"); const [age, setAge] = useState(25);如你所见 ， 我们现在有3个独立的状态对象 。例如 ， 如果我们想更新年龄 ， 只需调用setAge()函数 。count和title也是一样 。我们不再受制于旧的笨重的类组件方式——用setState()来管理一个超大的状态对象.
this.setState({ count: props.initialValue, title: "This is my title", age: 25 })那数据更新的时候 ， 我要做一些事情怎么做？在使用函数组件 + React Hooks 这种模式下 ， 我们再也不用去管什么生命周期了 ， 什么 componentDidMount、componentDidUpdate都可以统统见鬼去了 。
你可能会问 ， 那我用啥？？？别慌 ， 兄弟！ React 给我们提供了另外一个钩子来干这事儿 。
useEffect效果钩子 useEffect 是我们处理“副作用”的地方 。
呃,副作用？那是啥?
副作用那我们就先偏离一下正题 ， 讨论一下副作用到底是什么 。这有助于我们理解 useEffect() 的作用以及为什么他很有用 。
一个你看不懂的无聊的正规解释应该是：

? “在编程中 ， 副作用是指在程序处理过程改变了程序范围之外的变量”
用 React 术语来说 ， 副作用其实意味着“当组件的变量或状态因某些外部事物而改变” 。例如：
  • 组件接受了一个改变组件本身状态的props
  • 当组件进行接口调用并在接口返回结果是执行了某些操作（例如 ， 更改了组件的状态）
那么为什么称之为副作用呢？
我们不能确定这些代码的执行结果是什么 。我们永远无法百分百确定我们的组件会接收到什么样的 props ， 也无法确定接口调用返回的结果数据是什么 。而且 ， 我们无法确定这将如何影响我们的组件 。
当然 ， 我们也可以编写代码校验、处理错误等 ， 但是我们最终还是不能确定这样的事情带来的副作用是什么 。
所以可以这么说 ， 当组件的状态因为一些外界因素改变的时候 ， 这就可以称作副作用 。
好了 ， 我们可以回正题了 。继续来看useEffect这个Hook 。
在使用函数组件时 ， 我们不再使用生命周期钩子函数 ， 例如 componentDidMount ， componentDidUpdate等 。因此 ， 可以这么说 ， useEffect Hook 代替了之前我们用到的React钩子函数 。
让我们比较一下基于类的组件和useEffect Hooks的使用方式
import React, { Component } from 'react';class App extends Component {componentDidMount() {console.log('I have just mounted!');}render() {return <div>Insert JSX here</div>;}}用了useEffect之后
function App() {useEffect(() => {console.log('I have just mounted!');});return <div>Insert JSX here</div>;}


推荐阅读


上一篇：桂花茶的好处,春季常喝桂花茶

下一篇：微服务核心技术——负载均衡