函数组件:使用JS的函数或者箭头函数创建的组件
大写字母开头
必须有返回值
,表示该组件的结构使用函数创建组件
function Hello () {return (这是我的函数组件)
}
使用箭头函数创建组件
const Hello = () => 这是一个函数组件
使用组件
ReactDOM.render( , document.getElementById('root'))
例子:
01-函数组件-基本使用
import React from 'react'
import ReactDOM from 'react-dom'/* 1. 通过函数创建一个组件即可1. 组件的名字必须是大写开头 为了区分html原有的标签2. 组件必须返回一段结构3. 如果组件不想渲染任何的内容 也需要return null
*/
function Hello() {return 我是hello组件
}const element = (函数组件
{/* 使用组件 */}
)ReactDOM.render(element, document.getElementById('root'))
02-函数组件-箭头函数
import React from 'react'
import ReactDOM from 'react-dom'const Hello = () =>我是Hello组件
const element = (函数组件
{/* 使用组件 */}
)ReactDOM.render(element, document.getElementById('root'))
class 类名{}
constructor
的用法,创建对象/* class 类 extends 继承 */
// function Teacher(name, age) {
// this.name = name
// this.age = age
// }// Teacher.prototype.sayHi = function () {
// console.log('大家好,我是' + this.name)
// }// const stu = new Teacher('松哥', 29)
// console.log(stu)
// stu.sayHi()// class是一个语法糖
class Teacher {// 构造函数constructor(name, age) {this.name = namethis.age = age}sayHi() {console.log('大家好,我是' + this.name)}sing() {console.log('能够唱歌')}
}const stu = new Teacher('松哥', 29)
console.log(stu)
stu.sing()
/* Person 人Chinese 中国人African 非洲人
*/
class Person {constructor(name, gender) {this.name = namethis.gender = gender}eat() {console.log('都会吃')}
}class Chinese extends Person {constructor(name, gender) {// 父类的构造函数super(name, gender)this.skin = 'yellow'}pingpong() {console.log('打乒乓球')}
}const c1 = new Chinese('姚明', 40)
console.log(c1)
c1.eat()
c1.pingpong()class African extends Person {constructor(name, gender) {super(name, gender)this.skin = 'black'}run() {console.log('跑的贼快')}
}const xh = new African('小黑', 30)
console.log(xh)
项目中的组件多了之后,该如何组织这些组件呢?
实现方式
创建Hello.js
创建组件(函数 或 类)
在 Hello.js 中导出该组件
在 index.js 中导入 Hello 组件
渲染组件,
05-类组件的语法
import { Component } from 'react'
import ReactDOM from 'react-dom'/* 1. 类组件必须继承React.Component2. 必须提供render方法3. render方法必须由返回值,需要返回一段结构
*/
class Hello extends Component {render() {return 我是hello组件}
}const element = (类组件
)ReactDOM.render(element, document.getElementById('root'))
06-把组件抽取到独立的js中
Demo
const Demo = () => 我是一个函数组件
export default Demo
Hello
import { Component } from 'react'class Hello extends Component {render() {return 我是一个Hello组件}
}
export default Hello
index
import ReactDOM from 'react-dom'
import Hello from './components/Hello.jsx'
import Demo from './components/Demo.jsx'const element = (类组件
)ReactDOM.render(element, document.getElementById('root'))
比如计数器案例,点击按钮让数值+1, 0和1就是不同时刻的状态,当状态从0变成1之后,UI也要跟着发生变化。React想要实现这种功能,就需要使用有状态组件来完成。
state
即数据,是组件内部的私有数据
,只有在组件内部可以使用state的值是一个对象
,表示一个组件中可以有多个数据07-类组件提供状态
import { Component } from 'react'
import ReactDOM from 'react-dom'/* 给类组件提供状态
*/
class App extends Component {constructor() {super()// 给this增加一个属性 statethis.state = {msg: 'hello',count: 0,}}render() {return (我是根组件
{this.state.msg}{this.state.count})}
}ReactDOM.render( , document.getElementById('root'))
09-类组件-提供状态简写
import { Component } from 'react'
import ReactDOM from 'react-dom'/* 给类组件提供状态
*/
class App extends Component {// constructor() {// super()// // 给this增加一个属性 state// this.state = {// msg: 'hello',// count: 0,// }// }state = {msg: 'hello',count: 0,}render() {return (我是根组件
{this.state.msg}{this.state.count})}
}ReactDOM.render( , document.getElementById('root'))