函数组件:使用JS的函数或者箭头函数创建的组件
函数组件
组件
和普通的 HTML
// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2. 创建 函数式组件
// 普通函数或者箭头函数创建组件,首字母大写
// 组件必须要有返回值
function Music() {
return (
<div>
<h1>haha</h1>
</div>
)
}
const VNode = (
<div>
<Music></Music>
</div>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
类组件:使用 ES6 的 class 创建的组件,叫做类(class)组件
React.Component
父类,从而使用父类中提供的方法或属性render
方法// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2.
class Hello extends React.Component {
render() {
return <h1>哈哈</h1>
}
}
const VNode = (
<>
<Hello></Hello>
</>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
在components
文件夹下,创建函数组件hello.js
,类组件home.js
,
const Hello = () => <h1>我是hello组件</h1>
export default Hello
import React from 'react'
class Home extends React.Component {
render() {
return <h2>home</h2>
}
}
export default Home
在index.js
中导入
// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 导入组件
import Hello from './components/hello'
import Home from './components/home'
// 2. 创建虚拟DOM
const App = (
<>
<Hello></Hello>
<Home></Home>
</>
)
// 3. 挂载
ReactDom.createRoot(document.querySelector('#root')).render(App)
状态即数据。
无状态组件
函数组件是不能自己提供数据 【前提:基于hooks之前说的 16.8之前】有状态组件
类组件可以自己提供数据,数据如果发生了改变,内容会自动的更新// 1. 导包
import React from "react"
import ReactDom from 'react-dom/client'
// 函数组件 没有状态 仅仅做一些数据展示的工作,可以使用函数组件
// function App() {
// return (
// <div>我是组件</div>
// )
// }
// 类组件 有状态 如果有状态,状态需要切换,更新视图 用类组件
class App extends React.Component {
render() {
return (
<h1>我是类组件</h1>
)
}
}
const VNode = (
<div>
<App></App>
</div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
state
即数据,是组件内部的私有数据,只有在组件内部可以使用this.state.xxx
来获取状态// 1. 导包
import React from "react"
import ReactDom from 'react-dom/client'
// 类组件 有状态 如果有状态,状态需要切换,更新视图 用类组件
class App extends React.Component {
// state节点中提供状态
// 通过 this.state.xxx 来获取状态
state = {
name: 'Tt',
age: 17
}
render() {
return (
<h1>{this.state.name} ----- {this.state.age}</h1>
)
}
}
const VNode = (
<div>
<App></App>
</div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
语法:on+事件名={事件处理程序}
比如onClick={this.handleClick}
// 1. 导包
import React from "react"
import ReactDom from 'react-dom/client'
// 类组件 有状态 如果有状态,状态需要切换,更新视图 用类组件
class App extends React.Component {
// state节点中提供状态 通过 this.state.xxx 来获取状态
state = {
name: 'Tt',
age: 17
}
// 提供一些方法
handleClick() {
console.log('点击');
}
render() {
return (
<div>
<button onClick={this.handleClick}>按钮</button>
</div>
)
}
}
const VNode = (
<div>
<App></App>
</div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 类组件 有状态 如果有状态,状态需要切换,更新
class App extends React.Component {
// state节点中提供状态
// 通过 this.state.xxx 来获取状态
state = {
name: 'Tt',
age: 17,
}
// 提供方法
handleClick(e) {
console.log('点击qqq')
console.log(e) // e是react合成的事件对象
e.preventDefault() // 阻止默认行为
}
render() {
return (
<div>
{/* 方法后面不加小括号,因为加了小括号表示函数就执行啦 */}
<button onClick={this.handleClick}>按钮</button>
<a href="www.baidu.com">百度一下</a>
</div>
)
}
}
const VNode = (
<div>
<App></App>
</div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
render
里面的this指向app
组件
render
外面的指向undefined
// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 类组件 有状态 如果有状态,状态需要切换,更新视图 用类组件
class App extends React.Component {
// 提供一些方法
handleClick() {
console.log(this) // undefined
}
render() {
**console.log(this) //App组件**
return (
<div>
{/* this指向的是App组件 */}
{/* 这并不是函数的调用,仅仅是做了一个赋值 onClick = this.handleClick */}
<button onClick={this.handleClick}>按钮</button>
</div>
)
}
}
const VNode = (
<div>
<App></App>
</div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)
通过上面的this指向我们可以看到,点击按钮时this会指向undefined
。解决这个问题方法如下:
写成箭头函数
<button onClick={(e) => this.handleClick(e)}>按钮</button>
使用bind将this修改 onClick={this.handleClick.bind(this)}
<button onClick={this.handleClick.bind(this)}>按钮</button>
直接修改handleClick函数,将其改为箭头函数
handleClick = (e) => {
console.log('handleClick: ', this, e)
}