浅析React 对state的理解
如何定义复杂组件（类组件）与简单组件（函数组件）？
- 是否具有状态（state）
引出问题，什么是状态？
举个例子，今天考试，考砸了，因为我状态不好，是状态影响了我的行为。
组件中的状态，驱动了页面更新，换句话说，组件状态中存着数据，数据的改变，驱动页面的更新。
这里要了解，state状态是谁身上的状态？state状态是组件实例对象身上的状态，不是组件类本身身上的，是由这个类缔造的实例身上的。
（class)组件实例上三大属性之一：state
显示内容
实现一个需求，通过点击页面，炎热/凉爽切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react</title>
</head>
<body>
<div id="test"></div>
<!-- 引入核心库 -->
<script src="../js/react.development.js"></script>
<!-- 扩展库 -->
<script src="../js/react-dom.development.js"></script>
<!-- 转换jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 1.创建组件
class Weather extends React.Component {
/**
* 构造器中能收到什么数据，取决于new的时候，传的是什么数据
* new Weather并不是我们操作的，而是react操作的
*/
constructor(props) {
// 还没学到props，但得用着，模仿官网写
// 类本身语法
super(props);
// 构造函数中this指向构造函数实例对象
// 16.8之前，state是{}，16.8及之后，是null
this.state = {
isHot: true,
};
}
render() {
console.log("this:", this);
return <h1>今天天气很炎热</h1>;
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById("test"));
</script>
</body>
</html>
初始化数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react</title>
</head>
<body>
<div id="test"></div>
<!-- 引入核心库 -->
<script src="../js/react.development.js"></script>
<!-- 扩展库 -->
<script src="../js/react-dom.development.js"></script>
<!-- 转换jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 1.创建组件
class Weather extends React.Component {
/**
* 构造器中能收到什么数据，取决于new的时候，传的是什么数据
* new Weather并不是我们操作的，而是react操作的
*/
constructor(props) {
// 还没学到props，但得用着，模仿官网写，不然无法执行下去
// 类本身语法
super(props);
// 构造函数中this指向构造函数实例对象
// 16.8之前，state是{}，16.8及之后，是null
this.state = {
isHot: true,
};
}
// state在Weather的实例对象身上
render() {
console.log("this:", this);
return <h1>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h1>;
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById("test"));
</script>
</body>
</html>
接下来写点击事件，注意，先做一个错误示范
<script type="text/babel">
// 1.创建组件
class Weather extends React.Component {
/**
* 构造器中能收到什么数据，取决于new的时候，传的是什么数据
* new Weather并不是我们操作的，而是react操作的
*/
constructor(props) {
// 还没学到props，但得用着，模仿官网写
// 类本身语法
super(props);
// 构造函数中this指向构造函数实例对象
// 16.8之前，state是{}，16.8及之后，是null
this.state = {
isHot: true,
};
}
// state在Weather的实例对象身上
render() {
console.log("this:", this);
return (
<h1 onClick={demo()}>
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
</h1>
);
}
}
function demo() {
console.log("demo被调用");
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById("test"));
</script>
我在调用点击事件时，写的是 onClick={demo()}
在控制台会发现，函数被立即执行了
react在new Weather时，通过实例调用了render方法，想拿到return的值，就要执行<h1 onClick={demo()}>今天天气很{this.state.isHot ? “炎热” : “凉爽”}</h1>，执行到onClick赋值语句时，就要将demo()函数调用的返回值交给onClick作为回调，demo()的返回值是undifend,也就是把undifend交给onClick作为回调，**这是错误的做法，是因为在demo后加()，导致函数调用。**等到点击时，就调用了undifend，react处理了这一过程，如果是undifend,就没有多余动作。
常见错误写法
render() {
console.log("this:", this);
return (
<h1 onClick='demo()'>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h1>
);
}
render() {
console.log("this:", this);
return (
<h1 onclick='demo'>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h1>
);
}
正确写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react</title>
</head>
<body>
<div id="test"></div>
<!-- 引入核心库 -->
<script src="../js/react.development.js"></script>
<!-- 扩展库 -->
<script src="../js/react-dom.development.js"></script>
<!-- 转换jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 1.创建组件
class Weather extends React.Component {
/**
* 构造器中能收到什么数据，取决于new的时候，传的是什么数据
* new Weather并不是我们操作的，而是react操作的
*/
constructor(props) {
// 还没学到props，但得用着，模仿官网写
// 类本身语法
super(props);
// 构造函数中this指向构造函数实例对象
// 16.8之前，state是{}，16.8及之后，是null
this.state = {
isHot: true,
};
}
// state在Weather的实例对象身上
render() {
console.log("this:", this);
return (
<h1 onClick={demo}>
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
</h1>
);
}
}
function demo() {
console.log("demo被调用");
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById("test"));
</script>
</body>
</html>
修改
上文已经将数据渲染到页面中，现在想要修改页面的数据。想要修改数据，首先要拿到state中的isHot，先看一段错误写法：
function demo() {
console.log("demo被调用");
// 错误示范
const { isHot } = this.state;
console.log("isHot", isHot);
}
提示xxx of undefined(reading ‘state')，也就是state of undefined，当xxx为undefined时，undefined.state 就会报这个错误。这里的xxx指的就是this。
来打印一下this
function demo() {
// 错误示范
console.log("this", this);
const { isHot } = this.state;
console.log("isHot", isHot);
}
来看一下代码结构和注释
通过打印发现，将自定义函数放到类的外边，数据虽然能够正确显示，但并不能拿到/修改state中的数据。
class Weather extends React.Component {
/**
* 构造器中能收到什么数据，取决于new的时候，传的是什么数据
* new Weather并不是我们操作的，而是react操作的
*/
constructor(props) {
// 还没学到props，但得用着，模仿官网写
// 类本身语法
super(props);
/**
* 构造函数中this指向构造函数实例对象
* 16.8之前，state是{}，16.8及之后，是null
* state在Weather的实例对象身上
*/
this.state = {
isHot: true,
};
}
// 切换天气
demo() {
console.log("this", this);
const { isHot } = this.state;
console.log("isHot", isHot);
}
// 渲染
render() {
console.log("this:", this);
return (
<h1 onClick={demo}>
今天天气很{this.state.isHot ? "炎热" : "凉爽"}
</h1>
);
}
}
注意，类不是函数体，不需要写function
到此这篇关于浅析React 对state的理解的文章就介绍到这了,更多相关React state理解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React 三大属性之state的使用详解
React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r
-
React State状态与生命周期的实现方法
一.实现组件的方法: 组件名称首字母必须大写 1.通过JS函数方式实现组件 <div id="app"></div> <script type="text/babel"> var ReactDiv = document.getElementById('app'); function GetReactComp(){ return <p>我是react组件</p> } const hellocomp = <
-
浅谈React之状态(State)
在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.你也可以认为组件在React当中是一个状态机(State Machines).当用户进行操作时会实现不同的状态,然后再渲染到你的页面中,让你的页面与数据始终保持一致. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件
-
详解react中的state的简写方式
前言 什么是state 我们都说React是一个状态机,体现是什么地方呢,就是体现在state上,通过与用户的交互,实现不同的状态,然后去渲染UI,这样就让用户的数据和界面保持一致了.state是组件的私有属性. 在React中,更新组件的state,结果就会重新渲染用户界面(不需要操作DOM),一句话就是说,用户的界面会随着状态的改变而改变. PS: state 只能在本组件中去初始化,并且 state 只能被本组件去修改和仿问,不能被外部仿问和修改,所以也可以说,state 是组件私有的.
-
浅析React 对state的理解
如何定义复杂组件(类组件)与简单组件(函数组件)? 是否具有状态(state) 引出问题,什么是状态? 举个例子,今天考试,考砸了,因为我状态不好,是状态影响了我的行为. 组件中的状态,驱动了页面更新,换句话说,组件状态中存着数据,数据的改变,驱动页面的更新. 这里要了解,state状态是谁身上的状态?state状态是组件实例对象身上的状态,不是组件类本身身上的,是由这个类缔造的实例身上的. (class)组件实例上三大属性之一:state 显示内容 实现一个需求,通过点击页面,炎热/凉爽切换
-
深入浅析React中diff算法
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,
-
浅析React中的受控组件和非受控组件
非受控组件 表单数据由DOM本身处理.即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值) 1.非受控组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g
-
React 中state与props更新深入解析
目录 正文 组件的 updater 处理 ClickCounter Fiber 的 update beginWork Reconciling children for the ClickCounter Fiber 处理 Span Fiber 的 update Reconciling children for the span fiber Effects list commit 阶段 应用 effects DOM updates 调用 Post-mutation 生命周期 正文 在这篇文章中,我使
-
React Context原理深入理解源码示例分析
目录 正文 一.概念 二.使用 2.1.React.createContext 2.2.Context.Provider 2.3.React.useContext 2.4.Example 三.原理分析 3.1.createContext 函数实现 3.2. JSX 编译 3.3.消费组件 - useContext 函数实现 3.4.Context.Provider 在 Fiber 架构下的实现机制 3.5.小结 四.注意事项 五.对比 useSelector 正文 在 React 中提供了一种「
-
React Hooks的深入理解与使用
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react
-
深入浅析React refs的简介
一.是什么 Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素 本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点 二.如何使用 创建ref的形式有三种: 传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素 传入对象,对象是通过 React
-
深入浅析react native es6语法
react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet,Text,View } = React; 这句代码是ES6 中新增的解构(Destructuring)赋值语句.准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量. 上面的代码等价于: var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View 再看几个例子,以前
-
浅析Spring 中 Bean 的理解与使用
目录 一.定义 二.控制反转(IoC) 1.什么是依赖注入与控制反转呢?先通过一个例子来理解一下 2.让 Spring 控制类构建过程 3.这就是 IOC 三. @Bean 注解的使用 1.使用说明 2.Bean 名称 2.1.默认情况下 Bean 名称就是方法名(首字母小写),比如下面 Bean 名称便是 myBean 2.2.@Bean 注解支持设置别名.比如下面除了主名称 myBean 外,还有个别名 myBean1(两个都可以使用) 2.3.@Bean 注解可以接受一个 String 数
-
浅析对Spring aware接口理解
目录 1. aware接口的作用 2. 常用aware接口及作用 3. 使用样例:ApplicationContextAware 在Bean中获取上下文 4. 自定义aware的方式 4.1 定义继承Aware的接口 4.2 注册实现BeanPostProcessor接口的Bean 4.3 实现TimeAware接口,并测试 5. 源码处理方式 5.1 初始化阶段的源码逻辑 5.2 实现前三个aware接口的处理 5.3 剩余实现aware接口的Bean的处理 1. aware接口的作用 通过a