setState的写法

richest_qi

已于 2022-05-31 15:47:35 修改

阅读量2k

点赞数

分类专栏： React17/18 文章标签： setState 对象式写法函数式写法回调函数

于 2022-05-31 15:18:51 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/125065670

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

文章目录

计数器案例
对象式写法
- setState({})
- setState({},callback)
函数式写法
- setState((state,props) => {})
- setState((state,props) => {},callback)
相关链接

setState()有以下两种写法，

对象式写法。如：setState({})或者setState({},callback)。
函数式写法。如：setState((state,props) => {})或者setState((state,props) => {},callback)。

计数器案例

在这里插入图片描述

新建react项目，主要涉及的文件有，

模板文件index.html
入口文件index.js
入口组件App.js
components/Counter/index.jsx，即Counter组件

模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react_app</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

ReactDOM.render(<App/>,document.getElementById("root"));

入口组件App.js

import React, { Component } from 'react'
import Counter from "./components/Counter";

export default class App extends Component {
  render() {
    return (
      <div><Counter/></div>
    )
  }
}

Counter/index.jsx（Counter组件）

import React, { Component } from 'react'

export default class Counter extends Component {

    state = {
        count:0
    }
    increment = () => {
        const {count} = this.state;
        this.setState({
            count:count+1
        })
    }

    render() {
        const {count} = this.state;
        const {increment} = this;
        return (
            <div>
                <h2>当前值为：{count}</h2>
                <button onClick={increment}>点我加1</button>
            </div>
        )
    }
}

对象式写法

代码变更涉及的文件是，Counter/index.jsx，即Counter组件。
所谓对象式写法，是指setState()的第一个参数是一个对象，即setState({})。
setState()也接受第二个参数，是一个回调函数，即setState({},callback)。state更新且页面渲染完成后，该回调函数才会被调用。

setState({})

import React, { Component } from 'react'

export default class Counter extends Component {
    state = {
        count:0
    }
    increment = () => {
        const {count} = this.state;
        this.setState({count:count+1})
    }

    render() {
        const {count} = this.state;
        const {increment} = this;
        return (
            <div>
                <h2>当前值为：{count}</h2>
                <button onClick={increment}>点我加1</button>
            </div>
        )
    }
}

setState({},callback)

import React, { Component } from 'react'

export default class Counter extends Component {
    state = {
        count:0
    }
    increment = () => {
        const {count} = this.state;
        this.setState({count:count+1},() => {
            console.log(this.state.count);
        })
    }

    render() {
        const {count} = this.state;
        const {increment} = this;
        return (
            <div>
                <h2>当前值为：{count}</h2>
                <button onClick={increment}>点我加1</button>
            </div>
        )
    }
}

函数式写法

代码变更涉及的文件是，Counter/index.jsx，即Counter组件。
所谓函数式写法，是指setState()的第一个参数是一个函数，即setState((state,props) => {})。
setState()也接受第二个参数，是一个回调函数，即setState((state,props) => {},callback)。state更新且页面渲染完成后，该回调函数才会被调用。

setState((state,props) => {})

import React, { Component } from 'react'

export default class Counter extends Component {
    state = {
        count:0
    }
    increment = () => {
        this.setState((state,props) => {
            console.log(state,props);
            return {count:state.count+1}
        })
    }

    render() {
        const {count} = this.state;
        const {increment} = this;
        return (
            <div>
                <h2>当前值为：{count}</h2>
                <button onClick={increment}>点我加1</button>
            </div>
        )
    }
}

setState((state,props) => {},callback)

import React, { Component } from 'react'

export default class Counter extends Component {

    state = {
        count:0
    }
    increment = () => {
        this.setState((state,props) => {
            console.log(state,props);
            return {count:state.count+1}
        },() => {
            console.log(this.state.count);
        })
    }

    render() {
        const {count} = this.state;
        const {increment} = this;
        return (
            <div>
                <h2>当前值为：{count}</h2>
                <button onClick={increment}>点我加1</button>
            </div>
        )
    }
}