React学习笔记

文章目录

• 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