函数组件:使用JS的函数或者箭头函数创建的组件
// 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
,
hello.js
const Hello = () => <h1>我是hello组件</h1> export default Hello
home.js
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)
状态即数据
// 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)