this指向

var length = 10;
var obj = {
    length:20,
    sayHi(){
        console.log(this.length)
    }
}
obj.sayHi()
const fn = obj.sayHi()
fn()
var arr = [obj.sayHi,1,2]
arr[0]()

打印得结果为

• 20 this指向的是obj，因为调用者是obj
• 10 this指向的是window，因为调用者是window
• 3 this指向的是arr，因为调用者是arr

react中的this指向

在类组件中 render 的 this 指向当前组件

render() {
  const onClick = this.handleClick
  onClick()
  return (
    <div>
      <h1>XXX</h1>
      <div>{this.state.msg}</div>
      <div>{this.state.count}</div>
      <button onClick={this.handleClick}>点击事件</button>
    </div>
  )
}
handleClick() {
  console.log('233' + this)
}

函数调用中的 this 因为没有定义所以是 undefined , 不知道谁是调用者

解决方案1

把函数调用包裹在箭头函数中

const onClick = () => this.handleClick()
onClick()

解决方案2

绑定 this

const onClick = this.handleClick.bind(this)
onClick()

解决方案3

class新语法：类实例语法

handleClick = ()=>{
    console.log(this)
}

此处是把函数写在了实例上，需要配合插件。。直接使用 js 可能无效

react修改状态

• 组件中的状态是可变的
• 语法 this.setState({}) ，这个方法可以修改state同时可以更新UI
• 不要直接修改 state 中的值

 render() {
    return (
      <div>
        <h1>XXX</h1>
        <div>{this.state.msg}</div>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick}>点击事件</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }

和vue数据更新的区别

vue： vue2会通过 es5 的语法 Object.defineProperty() vue3 会通过 es6 的 proxy 语法 检测到数据的变化，当数据变化的时候，vue 会帮助我们自动更新 DOM

react： react并不会去监听数据的变化，所以直接修改数据，react中的 DOM 不会自动更新，但是 react 提供了一个方法 setState() ，它可以做 1.修改 state 的值 2.更新 DOM

react核心理念

状态不变

• 不能直接修改 react 中的 state 的值，而是提供新的值覆盖
• 直接修改 react 中的 state 的值，组件不会更新

同样的在修改对象类型的数据时，也是采用相同的方法覆盖其需要修改的值

clickFn = ()=>{
    this.setState({
        count:1,
        msg:'world',
        user:{
            ...this.state.user,
            name:'ls'
        },
        list:this.state.list.fitter(item=>item!=='ls')
    })
}