文章目录
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代码。
比如说：
<div>你好，世界！</div>
会被处理成：
import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div", {
children: "\u4F60\u597D\uFF0C\u4E16\u754C\uFF01"
});
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
