React学习笔记05-类组件
1.React学习笔记01-React的基本认识2.React学习笔记02-创建React项目3.React学习笔记03-编写第一个react应用程序4.React学习笔记04-JSX语法
5.React学习笔记05-类组件
6.React学习笔记06-函数式组件7.React学习笔记07-组件嵌套8.React学习笔记08- 组件的样式9.React学习笔记09- 事件处理10.React学习笔记10- Ref的应用11.React学习笔记11-状态(state)12.React学习笔记12-循环渲染13.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)14.React学习笔记14-dangerousSetinnerHtml指令15.React学习笔记15-setState同步异步问题16.React学习笔记16-属性props17.React学习笔记17-属性VS状态18.React学习笔记18-非受控组件19.React学习笔记19-受控组件20.React学习笔记20-父子通信(子传父)21.React学习笔记21-非父子通信(状态提升)22.React学习笔记22-订阅发布模式23.React学习笔记23-非父子通信(订阅发布模式)ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,
ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return ( <h1>欢迎进入React的世界</h1> ) } } ReactDOM.render( <App />, document.getElementById('root') )
es6 class 组件其实就是一个构造器,每次使用组件都相当于在实例化组件,像这样:
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return ( <h1>欢迎进入{this.props.name}的世界</h1> ) } } const app = new App({ name: 'react' }).render() ReactDOM.render( app, document.getElementById('root') )
一定要让组件的类继承react.Component类,这样当你使用<App/>时react会帮助你完成组件的实例化
需要注意的是,一个render函数的返回值里面只能有一个根标签
import React from "react"; class App extends React.Component { render() { return <div>"hello React Component"</div> /* <div>hello react</div> 只能有一个根标签 */ } }
本文作者:SadicZhou
本文链接:https://www.cnblogs.com/SadicZhou/p/17774107.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步