React Hooks学习

Hooks

Hooks 是一种函数,该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。

有状态组件,就可以使用函数式组件来定义了。

类组件和函数组件

类组件:

import React, { Component } from 'react'
export default class Example extends Component {
    state = {
        count: 0
    }
    addCount() {
        this.setState({ count: this.state.count+1 })
    }
    render() {
        return (
            <div>
                <p>You clicked {this.state.count}</p>
                <button onClick={this.addCount.bind(this)}>Click me</button>
            </div>
        )
    }
}

函数组件:

import React, { useState } from 'react'
function Example() {
  //解构赋值 声明一个新的状态变量,我们将其称为 "count"
    const [count, setCount] = useState(0)
    return (
        <div>
            <p>You Click {count} Times</p>
            <button onClick={() => {setCount(count + 1);console.log(useState);}}>Click me</button>
        </div>
    )
}
export default Example
  • useState 返回一对:current state(状态)值和一个允许你更新它的函数
  • 所以用数组解构赋值进行自定义状态。
  • React 假定如果多次调用 useState ,则在每次渲染期间以相同的顺序执行

React 依赖于调用 Hooks 的顺序:(不同的状态的记录是通过useState的执行顺序

// ------------
// 第一次渲染
// ------------
useState('Mary')           // 1. 用'Mary'初始化名称状态变量
useEffect(persistForm)     // 2. 添加一个 effect 用于持久化form
useState('Poppins')        // 3. 使用 'Poppins' 初始化 surname 状态变量
useEffect(updateTitle)     // 4. 添加一个 effect 用于更新 title
// -------------
// 第二次渲染
// -------------
useState('Mary')           // 1. 读取 name  状态变量(忽略参数)
useEffect(persistForm)     // 2. 替换 effect 以持久化 form
useState('Poppins')        // 3. 读取 surname 状态变量(忽略参数)
useEffect(updateTitle)     // 4. 替换 effect 用于更新 title

使用State Hook

  • hooks在class中不起作用
  • 如果我们想在状态中存储多个不同的值,我们将调用 useState()多次
  • hooks需要一个一个的设置状态值,不能将前后的状态进行合并操作。

初始化state:

import {
    useState } from 'react';
function Example() {
   
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  //使用useState(x)来初始化一个状态

读取state:

<p>You clicked {count} times</p>
//函数组件直接读取state值

更新state:

<button onClick={() => setCount(count + 1)}>
  Click me
</button>
//使用setXxx()来更新

使用Effect Hook

可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

通过使用Effect Hook ,您可以告诉 React 在渲染后要做些什么,React 将记住传递的函数(我们将把它称为 “effect” ),然后在执行DOM更新后调用它。(类似与类组件中this.setState的第二个回调参数)

  • 每次渲染后 useEffect 都会运行。(异步的不影响视图更新)
  • 组件内调用 useEffect,Hooks支持JavaScript闭包。
  • 可以使用多个useEffect,进行组件的逻辑分解。
import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  return (
    <div&
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值