React框架中this的绑定

React框架中this的绑定

1.前言

​ 因为在react框架中是会利用到babel代码转换工具,这个工具会自动开启严格模式(“use strict”),在严格模式下,独立调用的函数其this指向会变为undefined.例如:事件的监听函数.

​ 所以需要我们解决this的绑定问题.

2.如何解决this指向问题

2.1利用bind给函数显示绑定this

2.1.1在传入函数时直接绑定

 		class App extends React.Component {
            //组件数据
            constructor() {
                super()
                this.state = {
                    message: 'Hello world!',
                }
            }
            //组件方法
            changeText() {
                this.setState({
                    message: "Hello React!",
                })
            }
            //组件渲染的操作
            render() {
                return (
                    <div>
                        <h2>
                            {this.state.message}
                        </h2>
                        // 渲染页面时给监听函数绑定this
                        <button onClick={this.changeText.bind(this)}>
                            修改文本
                        </button>
                    </div>
                )
            }
        }
        const app = ReactDOM.createRoot(document.querySelector('#app'))
        app.render(<App/>);

2.1.2在constructor中直接绑定this

            //组件数据
            constructor() {
                super()
                this.state = {
                    message: 'Hello world!',
                }
                this.changeText = this.changeText.bind(this)
            }

            //组件渲染的操作
            render() {
                return (
                    <div>
                        <h2>
                            {this.state.message}
                        </h2>
                        <button onClick={this.changeText}>
                            修改文本
                        </button>
                    </div>
                )
            }
        }

2.2.使用ES6中的fields语法

 		class App extends React.Component {
            //组件数据
            constructor() {
                super()
                this.state = {
                    message: 'Hello world!',
                }
            }
            //组件方法
            //fields语法,将一个箭头函数直接赋值给changeText
            changeText = ()=>{
                this.setState({
                    message: "Hello React!",
                })
            }
            //组件渲染的操作
            render() {
                return (
                    <div>
                        <h2>
                            {this.state.message}
                        </h2>
                        {/*将changeText传递给onClick监听函数*/}
                        <button onClick={this.changeText}>
                            修改文本
                        </button>
                    </div>
                )
            }
        }
        const app = ReactDOM.createRoot(document.querySelector('#app'))
        app.render(<App/>);

2.3事件监听时传入箭头函数(个人推荐)

{/*组件渲染时*/}
{/*给onClick监听函数传递一个箭头函数,箭头函数代码体中调用changeText函数*/}

<button onClick={() => this.changeText()}>

2.4额外补充:React框架的函数组件中没有this,所以没有this指向问题,this问题只考虑类组件

3.JS高级中的this指向(详细笔记)

https://blog.csdn.net/LovelyHeart/article/details/126441691