react入门-组件方法、数据和生命周期
2023-09-14 09:00:17 时间
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>
相关文章
- 字符串的方法_js字符串包含另一个字符串
- Vue3.0实现todolist-实现todolist每个组件需要用到的方法
- MMC卡修复心得与方法
- vue子组件向父组件传值的方法
- 方法调用的方式动态创建全局通用组件
- vue父组件操作子组件的方法_vue父组件获取子组件数据
- Vue 组件通信六种方法
- vue父组件调用子组件方法返回值_vue子组件修改父组件值
- vue子组件调用父组件父页面的方法「建议收藏」
- 精简 QQ2009 Beta 中文版 组件的方法
- 【Android 应用开发】Android UI 设计之 TextView EditText 组件属性方法最详细解析
- 【Android 进程保活】应用进程拉活 ( 系统 Service 机制拉活 | Service 组件 onStartCommand 方法分析 | 源码资源 )
- 统计学派的18种经典「数据分析方法」
- 【Android 屏幕适配】屏幕适配通用解决方案 ⑤ ( 自定义组件解决方案 | 自定义 ViewGroup 组件 onMeasure 方法中计算每个子组件坐标数据 | 自定义组件完整代码 )
- 基于Redis+Lua脚本实现分布式限流组件封装的方法
- Oracle 12c安装方法及一些使用问题
- python当出现 not supported between instances of ‘str’ and ‘int’ 的处理方法详解编程语言
- Oracle中赋予创建视图权限的方法(oracle创建视图权限)
- 表清理Mysql数据库:截断表的方法(mysql截断)
- MySQL中处理二进制数据的方法(mysql二进制数据)
- TDD 方法开发渗透测试工具:代理扫描器(第一集)
- MySQL 覆盖查询语句优化的实现方法(mysql覆盖)
- 成系统的各个组件Linux查看系统组件的方法探究(linux如何查看组)
- Linux下掌握文件夹权限的方法(linux查看文件夹权限)
- Oracle程序中添加语句的实现方法(oracle代码添加语句)
- 关于有些Asp.net项目发布后出现网址乱码的解决方法
- Jquery的hover方法让鼠标经过li时背景变色
- java验证码组件kaptcha使用方法
- c#创建vc可调用的com组件方法分享
- Android实现动态切换组件背景的方法
- C#用ComboBox控件实现省与市的联动效果的方法