文章目录
- 1,入门案例
- 2,JSX
- 2.1,本质是JS
- 2.2,JS表达式
- 2.3,列表渲染
- 2.4,条件渲染
- 2.5,事件处理
- 3,组件化
- 4,useState
- 5,样式处理
- 6,表单处理
- 7,获取DOM
- 8,组件通信:父传子
- 9,组件通信:子传父
- 10,生命周期
- 渲染完毕执行一次
- 卸载前执行一次
1,入门案例
需要安装Node.js
下载压缩包,解压到单独文件夹下。
https://download.csdn.net/download/qq_37284843/89398191
安装依赖,启动项目。
npm install
npm run dev
效果:
源代码App.jsx。
function App() {
return (
<>你好,世界!</>
)
}
export default App
2,JSX
2.1,本质是JS
JSX代码会被Babel进行处理,最终得到JS代码。
在线尝试:http://babeljs.io/repl
比如说:
<div>你好,世界!</div>
会被处理成:
import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div", {
children: "你好,世界!"
});
2.2,JS表达式
大括号包围。
function App() {
let abc = 123
let def = () => {
return "asd"
}
let qwe = { name: "张三" }
return (
<>你好,世界!
{1 + 1}
{"你好,世界!"}
{abc}
{def()}
{qwe.name}
</>
)
}
export default App
2.3,列表渲染
map方法。
function App() {
let abc = [{
name: "A",
id: 1
}, {
name: "B",
id: 2
}, {
name: "C",
id: 3
}, {
name: "D",
id: 4
}]
return (
<>你好,世界!
{abc.map(v => <li>{v.name}</li>)}
</>
)
}
export default App
会报错误,需要有唯一标识key。
function App() {
let abc = [{
name: "A",
id: 1
}, {
name: "B",
id: 2
}, {
name: "C",
id: 3
}, {
name: "D",
id: 4
}]
return (
<>你好,世界!
{abc.map(v => <li key={v.id}>{v.name}</li>)}
</>
)
}
export default App
2.4,条件渲染
function App() {
let abc = true
return (
<>你好,世界!
{abc && "真"}
{abc ? "真" : "假"}
</>
)
}
export default App
2.5,事件处理
事件名小驼峰。
处理函数写成箭头函数。
function App() {
const abc = () => {
alert(1)
}
return (
<div onClick={abc}>你好,世界!</div>
)
}
export default App
默认有个参数,接收事件对象。
function App() {
const abc = (e) => {
alert(e)
}
return (
<div onClick={abc}>你好,世界!</div>
)
}
export default App
想接收自定义参数,需要写成箭头函数。
function App() {
const abc = (v) => {
alert(v)
}
return (
<div onClick={e => { abc(1) }}>你好,世界!</div>
)
}
export default App
3,组件化
入门案例代码就是一个组件。
一个函数,返回DOM。
function App() {
return (
<>你好,世界!</>
)
}
export default App
使用组件的时候,当成标签来写就行。
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
举个例子。
function HelloWorld() {
return <h1>你好,世界!</h1>
}
function App() {
return (
<>
<HelloWorld />
<HelloWorld />
<HelloWorld />
</>
)
}
export default App
4,useState
组件的数据存储在这个里面。
0是初始值,count是数据,setCount是修改数据的方法。
计数器案例。
import { useState } from "react"
function App() {
const [count, setCount] = useState(0)
return (
<div onClick={() => setCount(count + 1)}>你好,世界!{count}</div>
)
}
export default App
5,样式处理
style的值变成了对象。
class变成了className。
function App() {
return (
<>你好,世界!
<div style={{ color: "red" }}>你好,世界!</div>
<div className="abc">你好,世界!</div>
</>
)
}
export default App
6,表单处理
表单数据绑定到状态上,通过onChange事件。
import { useState } from "react"
function App() {
const [v, setV] = useState("")
return (
<>你好,世界!
<input type="text" onChange={e => setV(e.target.value)} />{v}
</>
)
}
export default App
7,获取DOM
useRef函数。
import { useRef } from "react"
function App() {
const abc = useRef(null)
return (
<>你好,世界!
<input type="text" ref={abc} />
<button onClick={() => {
alert(abc.current.value)
}}>按钮</button>
</>
)
}
export default App
8,组件通信:父传子
父传子:props。
function HelloWorld(props) {
return <h1>你好,世界!{props.msg}</h1>
}
function App() {
return (
<>
<HelloWorld msg="ABC" />
<HelloWorld msg="DEF" />
<HelloWorld msg="GHI" />
</>
)
}
export default App
子组件标签内部的内容,由props.children接收。
function HelloWorld(props) {
return <h1>你好,世界!{props.children}</h1>
}
function App() {
return (
<>
<HelloWorld>ABC</HelloWorld>
<HelloWorld>DEF</HelloWorld>
<HelloWorld>GHI</HelloWorld>
</>
)
}
export default App
9,组件通信:子传父
父传子一个函数,子调用函数即可。
function HelloWorld(props) {
return <h1 onClick={() => { props.onA() }}>你好,世界!</h1>
}
function App() {
return (
<>
<HelloWorld onA={() => {
alert(1)
}}>ABC</HelloWorld>
<HelloWorld onA={() => {
alert(2)
}}>ABC</HelloWorld>
<HelloWorld onA={() => {
alert(3)
}}>ABC</HelloWorld>
</>
)
}
export default App
10,生命周期
渲染完毕执行一次
参数一是我们想执行的函数。
参数二是固定的空数组。
import { useEffect } from "react"
function App() {
const ef = useEffect(() => {
alert(1)
}, [])
return (
<div>你好,世界!</div>
)
}
export default App
卸载前执行一次
参数一的返回值是我们想执行的函数。
import { useEffect, useState } from "react"
function Son() {
const ef = useEffect(() => {
alert(1)
return () => {
alert(2)
}
}, [])
return <h1>你好,世界!</h1>
}
function App() {
const [show, setShow] = useState(false)
return (
< div >
{show && <Son />}
<button onClick={() => {
setShow(!show)
}}>切换</button>
</div >
)
}
export default App