react之旅（四）react 如何调用方法；获取数据；改变数据；方法传值

已于 2022-04-05 17:26:01 修改
阅读量8.8k 收藏 12
点赞数 4
分类专栏： react 文章标签： react
于 2020-07-18 22:41:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/letianxf/article/details/107435464
版权

本文主要讲解react组件中如何定义方法，调用方法，获取数据，改变数据，方法传值，调用方法时改变this指向。

一、react中调用方法

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
    }

    runFun() {
        console.log("runfun");
    }

    render(){
        return(
            <div>
                <button onClick={this.runFun()}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

这个地方的意图是点击按钮打印’runfun’，看下实际效果：
在这里插入图片描述
可以看到，没有点击，但是方法runFun已经调用了，这个地方的原因是runFun方法后面加了括号，加上括号之后就表示要调用这个方法，所以更改如下：

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
    }

    runFun() {
        console.log("runfun");
    }

    render(){
        return(
            <div>
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

去掉runFun后面的括号后得到了预期的结果：每点击一次按钮执行一次runFun方法。

二、react中获取数据

现在想要点击按钮获取state中的值，这个改如何实现？

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值"
        }
    }

    runFun() {
        console.log(this.state.msg);
    }

    render(){
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <br />
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

在这里插入图片描述
看到报了一个这样的错误，TypeError: Cannot read property 'state' of undefined，报这个错误的原因是this指向的问题，this指向可以参考：js之旅（七）js中this
在react中，可以用三种方式改变this指向

2.1 调用时bind函数改变this指向

可以在调用函数的时候借助于bind函数来改变被调用方法中的this指向。

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值"
        }
    }

    runFun() {
        console.log(this.state.msg);
    }

    render(){
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <br />
                <button onClick={this.runFun.bind(this)}>runFun</button>
            </div>
        )
    }
}
2.2 在构造函数中改变方法的this执行

可以在构造函数中，一开始就改变this的指向。

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值"
        }
        this.runFun = this.runFun.bind(this);
    }

    runFun() {
        console.log(this.state.msg);
    }

    render(){
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <br />
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

这样也可以得到想要的效果。

2.3 使用箭头函数

可以将被调用的函数定义成箭头函数，这样就不用关心this指向的问题。

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值"
        }
    }

    runFun = () => {
        console.log(this.state.msg);
    }

    render(){
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <br />
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

三、改变数据

3.1 如何改变state中的值

将数据放到state中，怎样去改变state中的值呢？在react中，可以调用setState方法来改变state的值当state值被改变后，会重新执行render方法，渲染数据。

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            test: "test",
            msg: "state中的值"
        }
    }

    changeData = () => {
        this.setState({
            msg: "改变后state中的值"
        })
    }

    render(){
        return(
            <div>
                <div>{this.state.test}</div>
                <br />
                <br />
                <div>{this.state.msg}</div>
                <br />
                <br />
                <button onClick={this.changeData}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

可以看到，调用setState方法后，重新执行render方法，重新渲染页面，而且，setState方法仅仅改变被修改的值，对state对象中的其它值没有影响。

3.2 改变state的值后render函数的调用情况

下面有个疑问？多次改变state中的值，render方法调用几次？

	//情景一
	this.setState({
            msg: {
                msg: "改变后state中的值",
                test: "改变后state中的值1"
            }
        });
     //情景二
	this.setState({
            msg: "改变后state中的值",
            test: "改变后state中的值1"
        });
     //情景三
	this.setState({
           msg: "改变后state中的值",
        });
	this.setState({
           test: "改变后state中的值1"
        });

上面这三种情景都会调用两次render方法。是不是可以得出结论：改变几个值就会调用几次render方法？这是错误的！！！！，为什么这样说？先举一个反例：

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值",
            msg1: "msgs",
            msg2: "msg2",
            msg3: "msg3"
        }
    }

    runFun = () => {
        this.setState({
            msg: "改变后state中的值",
        });
        this.setState({
            msg1: "改变后msgs",
        });
        this.setState({
            msg2: "改变后msg2",
        });
        this.setState({
            msg3: "改变后msg3"
        });
        
    }

    render(){
        console.log("render");
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <div>{this.state.msg1}</div>
                <br />
                <div>{this.state.msg2}</div>
                <br />
                <div>{this.state.msg3}</div>
                <br />
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

在这里插入图片描述
发现改变了四个值，render方法任然是调用了2次。
看一下官方说明：
在这里插入图片描述
setState之后发生的事情

  • setState操作不会立即更新组件
  • React会将state的改变压入栈中，在合适的时机，批量更新state和视图
    所以说，setState并不是立即更新的，和调用几次基本上关系不大
3.2 setState后render为什么总是调用2次

因为 React 在 Dev mode（开发模式） 下会刻意执行两次渲染，以防止组件内有什么 side effect 引起 bug，提前预防。

3.3 直接改变state中的值行不行？
import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值",
            msg1: "msgs",
            msg2: "msg2",
            msg3: "msg3"
        }
    }

    runFun = () => {
        this.setState({
            msg: "改变后state中的值",
        });
        this.setState({
            msg1: "改变后msgs",
        });
        this.setState({
            msg2: "改变后msg2",
        });
        
        this.state.msg3 = "test msg3"
        
    }

    render(){
        console.log("render");
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <div>{this.state.msg1}</div>
                <br />
                <div>{this.state.msg2}</div>
                <br />
                <div>{this.state.msg3}</div>
                <br />
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

实际测过发现是可以的，为什么网上都说不行？看下面的代码：

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值",
            msg1: "msgs",
            msg2: "msg2",
            msg3: "msg3"
        }
    }

    runFun = () => {
        this.setState({
            msg: "改变后state中的值",
        });
        this.setState({
            msg1: "改变后msgs",
        });
        this.setState({
            msg2: "改变后msg2",
        });
        this.setState({
            msg3: "改变后msg3",
        });
        
        this.state.msg3 = "test msg3"
        
    }

    render(){
        console.log("render");
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <div>{this.state.msg1}</div>
                <br />
                <div>{this.state.msg2}</div>
                <br />
                <div>{this.state.msg3}</div>
                <br />
                <button onClick={this.runFun}>runFun</button>
            </div>
        )
    }
}

export default Demo1;

发现msg3并没有使用直接赋值的值，而是用了setState中的值。
这个地方可以这样理解：

  • 直接修改state中字段的值是生效的，但是直接修改是不会触发render方法，故不会刷新页面，所以直接修改了state中的字段1，又用setState修改了字段2，就会在页面上看到字段1也被修改了
  • 如果即用setState修改了字段1，也直接修改了state中的字段1，它会以setState中的修改为准：直接修改state中的字段是立即生效的，但是setState方式修改它会将修改放入栈中，在合适的时机批量刷新state中的值，这个时候会覆盖掉直接修改后的值，表现形式就是以setState的修改为准。

四、方法传值

借助于bind方法，可以实现给方法传值：

import React from 'react';

class Demo1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "state中的值"
        }
    }

    changeData(msg){
        this.setState({
            msg: msg
        });
        
    }

    render(){
        console.log("render");
        return(
            <div>
                <div>{this.state.msg}</div>
                <br />
                <br />
                <button onClick={this.changeData.bind(this, "改变后msg的值")}>runFun</button>
            </div>
        )
    }
}

export default Demo1;
一天一丢丢
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值