React之setState使用

<!DOCTYPE html>

<html>

<head>

<title>React之setState使用</title>

</head>

<body>

//1.创建组件

class Weather extends React.Component{

//构造器调用几次？——1次

constructor(props){

console.log('constructor')

super(props)

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

this.demo=this.test.bind(this) //test为Weather中的 test()，demo在31行使用

}

//render调用几次？——1+n次,1是初始化，n是状态更新次数

render(){

console.log('render')

const {isHot,wind} =this.state;

console.log(this);

return <h1 onClick={this.demo}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>

}

//test调用几次？——点几次调几次

test() {

console.log('test')

//changeWeather放在哪里？————weather的原型对象上，供实例使用

//changeWeather作为onClick的回调，所有不是通过实例调用的，是直接调用

//类中的方法默认开启了局部的严格模式，所有changeWeather中的this为underfined

const isHot=this.state.isHot

//严重注意：状态必须通过setState进行更新，是合并，不是替换

this.setState({isHot:!isHot})

//注意：state不可直接更改，下面这行是直接更改

// this.state.isHot=!isHot//错误写法

}

//2.渲染组件到页面

ReactDOM.render(<Weather />, document.getElementById('test'));

</script>

</body>

</html>

React之setState使用相关推荐

react使用setState注意事项
React设计setState方法就是为了重新渲染页面看看下面的代码实现的结果: state = {value : 0 }function test() {this.setState({ value ...
初学React，setState后获取到的thisstate没变，还是初始state？
问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state? 描述: getInitialState(){return {data:[]};}, ...
[react] react中setState的第二个参数作用是什么呢？
[react] react中setState的第二个参数作用是什么呢? 第二个参数是一个callback函数,用于setState设置state的属性值成功之后的回调,此时调用this.state.p ...
react 解决 setState 异步问题
react 解决 setState 异步问题参考文章: (1)react 解决 setState 异步问题 (2)https://www.cnblogs.com/crazycode2/p/97158 ...
React学习笔记六 React拓展 - SetState
React拓展 - setState setState更新状态的两种写法 1.setState({}, [callback]) export default class Test extends Co ...
React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为有状态组件和无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
react 之 setState
setState()是react为我提供的状态管理工具比如现在有下面的这样一段代码: class MyComponent extends React.Component { constructor( ...
React 项目----setState 方法修改 state （16）
在class 类中,构造器里面有一个实例变量state ,这个也是class 组件和function组件之间的区别.class 组件有自己的私有的数据 export default class Bin ...
关于react中setState的深入理解
在react中,通常通过state或props,来控制整个组件的状态.一旦state或props发生改变,整个组件会被重新渲染.在setState的理解上,可能会存在一些误区. setState的基本 ...

React之setState使用

React之setState使用相关推荐

最新文章

热门文章