React知识点——state总结

来源:QQ快报
责任编辑:
字体:

1.state组件理解

理解

1) state是组件对象中最重要的属性,值是对象(可以包括多个key-value的组合)

2)组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)

注意

1)组件中render方法中的this为组件实例对象

2)组件自定义的方法中this为underfined,如何解决?

a. 强制绑定this:通过函数对象 bind()

b.使用箭头函数

比如:

// 自定义方法————要用复制语句的形式+箭头函数

changeWeather=()=>{

constisHot=this.state.isHot

this.setState({isHot:!isHot})

}

3)状态函数不能直接更新,必须使用setState

state

isHot:true

wind:"jojo的奇妙冒险"

======================

this.setState({isHot:!isHot})

!!这里要注意第二个S要大写!!

附加:

上一篇的代码很复杂,格式没错,但是很麻烦,要改善的话应该是这样改善

简化后:

// 1.创建组件

classWeatherextendsReact.Component{

// 初始化状态

state={isHot:false,wind:'微风'}

render() {

const{isHot}=this.state

return(今天天气真的很{this.state.isHot?'炎热':'凉爽'})

}

// 自定义方法————要用复制语句的形式+箭头函数

changeWeather=()=>{

constisHot=this.state.isHot

this.setState({isHot:!isHot})

}

}

// 2.渲染组件到页面

ReactDOM.render(,document.getElementById('test'))

对比之前的代码:

// 1.创建组件

classWeatherextendsReact.Component{

constructor(props) {

super(props)

this.state={isHot:true,wind:"微风"}

this.changeWeather=this.changeWeather.bind(this)

}

render() {

const{isHot}=this.state

return(今天天气很{this.state.isHot?'炎热':'凉爽'})

}

changeWeather() {

constisHot=this.state.isHot

this.setState({isHot:!isHot})

}

}

// 2.渲染组件到页面

ReactDOM.render(,document.getElementById('test'))

构造器咱们可以不用写,只用到state,就只初始化state。

// 初始化状态

state =

//创建构造器

constructor(props) {

super(props)

this.state = { isHot: true, wind: "微风" }

this.changeWeather = this.changeWeather.bind(this)

}

效果是一样的,上面的会不会是更简单一些。再就类实例对象中方法的调用。

// 自定义方法————要用复制语句的形式+箭头函数

changeWeather=()=>{

constisHot=this.state.isHot

this.setState({isHot:!isHot})

}

}

这里代表的2个方法

a. 强制绑定this:通过函数对象 bind()

b.使用箭头函数

箭头函数代码量更加的少更加的精简,那么代码就整洁简化了。

声明:以上内容并不代表本网赞同其观点。如有任何问题,请与不良与违法信息举报中心联系:513175919@qq.com。

www.book1234.com true http://www.book1234.com/q/20210222/20210222A000M400.html report 42735
娱乐时尚
  • 如何管理react 的 state
  • 如何清空react中的所有state
  • react 怎么做到数据请求拿到数据后才改变state
  • 怎样用react的this.state实现输入的内容自动保存。
  • React 中,如果state中有一个较深层的值改变了,怎...
  • React的 useState解构赋值怎么理解?
  • 如何可以将react中的state用redux正确地托管
  • 如何测试react中的this.state
  • React 中 setState 可以写判断语句吗?
  • React怎么修改state数组中的数据
  • 历史文化
    真视界
    旅游美食
    精彩图文
    我爱我车
    母婴健康
    关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
    Copyright © 2004-2018 book1234.com All Rights Reserved. 布客网 版权所有
    京ICP备10044368号-1 京公网安备11010802011102号