react入门-组件方法、数据和生命周期
2023-09-14 08:58:55 时间
react组件也像vue一样,有data和methods,但是写法就很不同了:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>state</title> </head> <body> <div id="app"></div> <script src="common/react.js"></script> <script src="common/react-dom.js"></script> <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script> <script type="text/babel"> class App extends React.Component { constructor(props) { super(props) //data react官方这边叫state,在组件contructor上面定义 this.state = { count: 0 } } //最常用个的生命钩子WillMount,DidMount,WillUpdate,DidUpdat componentWillMount() { console.log('1.componentWillMount') } componentDidMount() { console.log('2.componentDidMount') } componentWillUpdate(){ console.log('4.componentWillUpdate') } componentDidUpdate(){ console.log('3.componentDidUpdate') } add(event) { console.log('add') // 如果只写这"state.count++"react是不会自动重新去render组件的 // this.state.count++ // 只有调用setState react才会重新渲染组件 this.setState({count: this.state.count+1}) } //组件必须的render函数,相当于vue的<template>...</template> 调用自定义函数时必须bind(this) render() { return (<div> <input type="text" value={this.state.count}/> <input type="button" value="add" onClick={this.add.bind(this)}/> </div>) } } //渲染到#app上 ReactDOM.render( <App/>, document.querySelector('#app') ) </script> </body> </html>
相关文章
- Ubuntu 18.04 新系统 允许root远程登录设置方法
- 关系图组件MxClient问题现象及解决方法
- React组件方法中为什么要绑定this
- vue - 子组件向父组件 传递方法和参数
- 21个php常用方法汇总
- Python深入学习之特殊方法与多范式
- 数据挖掘中的基于决策树的分类方法
- thinkphp5日期时间查询比较和whereTime使用方法
- 通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件流程及组件集成方法
- YII2.0 Activeform表单组件的使用方法
- Python判断文件和文件夹是否存在的方法
- 数据分析师:避免低质量数据的5个方法
- Android中View绘制流程以及invalidate()等相关方法分析
- 【STM32H7】第6章 RTX5调试组件使用方法(重要)
- 【STM32H7】第6章 RL-USB调试组件使用方法(重要)
- 使用C# 11的静态接口方法改进 面向约定 的设计
- winform频繁刷新导致界面闪烁解决方法
- Apache httpclient的execute方法调试
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
- paip.截取字符串byLastDot方法总结uapi python java php c# 总结
- mysql全文索引FULLTEXT的哈希与BTREE方法对比
- 【华为云技术分享】序列特征的处理方法之二:基于卷积神经网络方法
- 使用Collections.emptyList()生成的List不支持add方法___Java Collections.emptyList方法的使用及注意事项
- 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法
- vue父组件向子组件动态传值的两种方法
- 执行此安装程序之前,必须安装 32 位 Windows 映像处理组件(WIC)解决的方法
- Win11终端管理员打不开解决方法
- vue父组件传值和子组件触发父组件方法
- COM组件的使用方法
- 【微服务笔记04】微服务组件之OpenFeign服务调用组件的介绍及其使用方法
- opencv-core组件一之像素操作、Mat常用方法
- python工具方法 29 基于Flask搭建自己的视频服务器网站
- 3D地形多层纹理混合加阴影渲染方法