React中构造函数、reader和函数的调用次数和时机测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建组件class Weather extends React.Component{//构造器调用几次？ ———— 1次constructor(props){console.log('constructor');super(props)//初始化状态this.state = {isHot:false,wind:'微风'}//解决changeWeather中this指向问题this.changeWeather = this.changeWeather.bind(this)}//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数render(){// console.log(this);console.log('render');//读取状态const {isHot,wind} = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}//changeWeather调用几次？ ———— 点几次调几次changeWeather(){//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefinedconsole.log('changeWeather');//获取原来的isHot值const isHot = this.state.isHot//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。this.setState({isHot:!isHot})console.log(this);//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！//this.state.isHot = !isHot //这是错误的写法}}//2.渲染组件到页面ReactDOM.render(<Weather/>,document.getElementById('test'))</script>
</body>
</html>

React中构造函数、reader和函数的调用次数和时机测试相关推荐

如何使 React 中的 useEffect、useLayoutEffect 只调用一次
如何使 React 中的 useEffect.useLayoutEffect 只调用一次 Hook 是 React 16.8 的新增特性,旨在替代原来 React 中的 Class 组件.Reac ...
16、react 中的高阶函数和柯里化
react 中的高阶函数和柯里化这一篇博文我们说一下高阶函数和柯里化,这两个次可能第一次听说,不知道是啥意思,我们先不管他哈,记得上一篇博客,我们实现了一个登陆的案例是吧?输入用户名和密码,点 ...
python万能装饰器实现计算函数的调用次数和执行时间
直接上代码 # python万能装饰器实现计算函数的调用次数和执行时间 import timedef set_fun(func):num = 0 # 初始化次数def call_fun(*args, ...
js中构造函数与普通函数的区别
构造函数不仅只出现在JavaScript中,它同样存在于很多主流的程序语言里,比如c++.Java.PHP等等.与这些主流程序语言一样,构造函数在js中的作业一样,也是用来创建对象时初始化对象,并且总 ...
派生类中构造函数与虚构函数的研究
1.继承过程中的构造函数 A:继承与派生过程中,基类的构造函数不能被继承,派生类中需要声明自己的构造函数. B:声明构造函数时,只需要对本类中新增成员进行初始化.至于基类继承过来的成员,应该调用基类的 ...
dojo——AMD(二、AMD中class内部成员函数相互调用实现)
一.引言这两天写arcgis javascript代码的时候,自己以为对dojo的amd规范掌握了,可是后来碰到了一个问题,在每个module中成员函数调用另外一个成员函数必须使用this调用(这点 ...
神经网络模型中class的forward函数何时调用_用Keras从零开始6步骤训练神经网络
本文将简要介绍Keras的功能特点,使用Keras构建模型一般流程的6个步骤,以及使用Keras处理mnist分类问题的一个简单范例. 一,Keras简介 Keras 是一个用 Python 编写的高 ...
汽车电子嵌入式技术篇（二） -autosar中的嵌入式系统函数的调用
1 程序的内存分布嵌入式系统中,一个函数调用时,它的内部机理是什么,执行了哪些步骤?如图1所示,先看看一个程序在运行时,它的内存分布状况. ...
java中render用法_如何在React中不在render函数中使用setState
您不应该使用 componentWillReceiveProps ,因为在最新版本中,'s UNSAFE and it won'适用于React的异步呈现 . 还有其他方法! 在初始装载和后续更新时, ...

React中构造函数、reader和函数的调用次数和时机测试

React中构造函数、reader和函数的调用次数和时机测试相关推荐

最新文章

热门文章