1.前言
1.react的第一个重难点，就是作用域问题
2.修改this指向的3个方法
3.有篇粗浅的理解的 this 文章
2.点击切换内容 显示内容 ON/OFF
其实就是个 简单的
开关demo
React只要绑定DOM事件,就要修改this的指向
3. this 指向修改 ---调用的时候 bind
自定义函数中this默认是undefined!!!!!需要自己修改this指向
this指向问题 打印查看点击切换
toggle的值
class ToggleComponent extends React.Component { constructor() { super(); // 初始化状态 this.state = { toggle: true }; } toggleHandle(event) { console.log("点击了", event); console.log(this); // 需要用到之前的状态值 this.setState({ toggle:!this.state.toggle }) } // ----自定义函数---- render() { let { toggle } = this.state; return ( <div> {/* 原生:on:click react: onClick */} {/* 注意没加() 给的是函数地址!! 加()就是调用 返回undefined*/} <button onClick={this.toggleHandle.bind(this)}> {toggle ? "ON" : "OFF"} </button> </div> ); } } ReactDOM.render(<ToggleComponent />, box);
3.1 react修改 this指向常用方式
绑定事件的时候
bind修改onClick={this.toggleHandle.bind(this)}
4. this指向修改 --构造函数
4.1 构造函数
可以理解为 一生下来 就做个标记
constructor() { super(); // 初始化状态 this.state = { toggle: true }; // 常用方式2 修改自定义函数的this指向问题 this.toggleHandle = this.toggleHandle.bind(this); }
4.2 渲染函数
render() { let { toggle } = this.state; return ( <div> <button onClick={this.toggleHandle}> {toggle ? "ON" : "OFF"} </button> </div> ); }
4.3 react修改 this指向常用方式
constructor里面this.toggleHandle = this.toggleHandle.bind(this);
5.需要注意的点
5.1setState 会返回旧的状态对象
所以当你需要用到 之前的 旧状态 一般通过
setState参数回调函数写法
// this.setState({ // toggle:!this.state.toggle // }) this.setState(oldState => { // react调用这个函数,传递一个旧的状态对象 // 我们返回一个新的状态对象 return { toggle: !oldState.toggle }; });
6. this指向修改 ---箭头函数
this.setState可以直接写到 箭头函数里面,但不推荐在这里面写 除非一行能搞定的
render() { let { toggle } = this.state; return ( <div> <button onClick={ev => { console.log("匿名函数", ev, this); this.toggleHandle(ev); }} > {toggle ? "ON" : "OFF"} </button> </div> ); }
react修改 this指向常用方式
用箭头函数
onClick={ev => { }}
7. 定义阶段使用箭头函数
7.1 class 组件
chooseHandler = ()=>{ console.log("this:",this); }
使用
<li onClick={this.chooseHandler}>小程序</li>
7.2 函数组件中
函数组件中 没有实例 ,所以没有
this
const App = () => { handleClick = (e) => { console.log(e); }; return <div onClick={this.handleClick}>函数组件</div>; };
8. this总结
1.绑定事件的时候
bind修改onClick={this.toggleHandle.bind(this)}不甚常用2.用箭头函数
onClick={ev => { }}这种看起来比较优雅
以上2种方式每一次 render渲染的时候都会重新进行 bind绑定,影响性能
3.
constructor里面this.toggleHandle = this.toggleHandle.bind(this);比较常用4.定义的阶段使用箭头函数
