react组件三大核心之一state
2023-09-11 14:19:39 时间
-
<!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>组件实例核心属性1:state</title> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <!-- 引入babel.js,用于将jsx转化为js --> <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/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: true }; // 解决changeWeather的this指向问题 this.changeWeather = this.changeWeather.bind(this); } // render调用几次?----1+n次,初始化调用一次,每次状态更新调用一次 render() { console.log('render'); return <h1 id="title" onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1> } changeWeather() { // changeWeather放在哪里?---Weather的原型对象上,供实例调用 // 由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用 // 类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined // 严重注意,状态state不可直接更改, // this.state.isHot = !this.state.isHot; 这是错误的写法 // 严重注意,state必须通过setState修改,且更新是合并,不是替换(不是把整个state对象替换了) const { isHot } = this.state; this.setState({ isHot: !isHot }) } } // 2.渲染组件到页面 ReactDOM.render(<Weather />, document.getElementById('test')) </script> </body> </html>
-
相关文章
- React 组件性能优化
- Hadoop主要组件知识点梳理
- 微服务技术栈:常见注册中心组件,对比分析
- react 自定义 TabBar 组件
- React 组件开发注意事项
- react 创建组件 (二)component
- [转]extjs组件添加事件监听的三种方式
- 你不知道的React Developer Tools,20 分钟带你掌握 9 个 React 组件调试技巧
- vue-element-admin el-upload组件实现图片上传
- react开发组件并发包到npm
- SwiftUI iOS 16组件教程之通过 .onPush 构建可自定义的多用途步骤视图(教程含源码)
- SwiftUI 布局之alignmentGuide如何让一个组件居中另外一个组件向上偏移(教程含源码)
- React教程之 React 中的高阶组件 (HOC) 简介
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- React生命周期改善组件性能
- React之ProtoTypes组件传值的数据类型校验
- React创建组件的3种写法
- 认识单文件组件.vue 文件
- React之组件之间的通讯
- react-native-scrollable-tab-view组件的简单使用
- react-redux、Provider、整合容器组件与UI组件、多组件数据共享
- React实践:Vite创建React项目、react事件传递参数的两种方式
- 微信小程序开发入门与实战(组件的使用)
- 基于 STM32CubeMX 添加 RT-Thread 操作系统组件(二)- 单线程SRAM静态内存
- vscode插件快速创建react组件快捷键
- 光伏“领跑者”基础在制造业 组件户外可靠性仍存疑
- 微信小程序学习第11天——Vant Weapp组件库、API Promise化、全局数据共享Mobx、分包
- 还在苦恼验证码怎么实现?看看这个验证码组件合集,你想要的都有
- React组件生命周期