react 相比 vue 更贴近 js ，更接近原生

❤️ JSX

JSX = js + xml，可以将 js 与 html 写在一个文件里，进行结合

const var1 = 'var1'  
  
function function1() {  
    return 'function1'  
}

<>  
    <div>  
        this is a test  
        {'这是一个字符串'}  
        {var1}  
        {function1()}  
        <div style={{color: 'red', textAlign: 'center'}}>this is red</div>  
    </div>  
</>

---

💛 数据渲染

循环渲染 ：

const list = [  
    {name: 'name1', id: 18},  
    {name: 'name2', id: 19},  
    {name: 'name3', id: 20}  
]

function App() {
    return (
        <>
            <ul>
                {list.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </>
    )
}

条件渲染 ：

• 简单的条件渲染

const var2 = true

<div>{var2 && 789}</div>  
<div>{var2 ? 123 : 456}</div>

• 复杂的条件渲染 ：通过定义一个函数来跟据值动态返回即可

❤️ 样式

react 的样式有两种写法 ：

• style 对象写法 ：style 属性需要传入一个 js 对象

style={{color: 'red', textAlign: 'center'}}

• 类名写法

.bubu {
	……
}

<button className='bubu'>click me</button>

❤️ 事件绑定

事件大全 ：

• onClick

---

• e 表示事件对象，里面有很多关于这次事件的信息
• data 表示传参

function clickButton(e, data) {  
    console.log(e)  
    console.log(data)  
}
<button onClick={(e) => clickButton(e, 'abc')}>click me</button>

// 不需要事件对象
function clickButton(data) {  
    console.log(data)  
}
<button onClick={() => clickButton('abc')}>click me</button>

// 不需要数据
function clickButton() {  
    console.log('hello')  
}
<button onClick={clickButton()}>click me</button>

❤️ 组件

• react 组件必须大写开头
• JSX 风格的组件不能返回多个标签，必须使用 <div>...</div> ，或空的 <>...</> 包裹

// 这就是一个按钮组件
function MyButton() {
  return (
    <button>我是一个按钮</button>
  );
}

// 嵌套组件，export default 定义 MyApp 可以在其他文件中引入该模块
export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  );
}

❤️ Hook

💛 useState

useState 允许我们添加状态变量（状态变量的更改可以影响界面的 UI 显示）

• useState 是一个函数，入参是变量的初始值，返回值是一个数组（第一个参数是变量，第二个参数是设置该变量的一个函数）
• userState 必须定义在组件中

function Test() {
    const [var3, setVar3] = useState(0)

    function plusOne() {
        setVar3(var3 + 1)
    }

    return (
        <button onClick={plusOne}>我是一个按钮,{var3}</button>
    );
}

// 修改对象时可以使用 ... 来复制现有状态
const [state, setState] = useState({
  name: 'Alice',
  age: 25,
  location: 'New York'
});

setState({
  ...state, // 复制现有的状态
  age: 26
});

useEffect

useEffect 用于在组件每次被挂载，或依赖项数组变化时执行 ：

• 依赖项数组 ：告诉 React 在哪些情况下重新运行副作用
  • 如果依赖项数组为空，副作用只会在组件挂载时执行一次
  • 如果依赖项数组包含某些值，只有这些值发生变化时，副作用才会重新执行

useEffect(() => {
  // 副作用操作，比如：数据请求、事件监听、订阅等
  
  return () => {
    // 可选的清理函数（会在组件卸载时调用，或者在依赖项变化前调用）
  };
}, [dependencies]); // 依赖项数组

useRef

useRef 是用来获取 DOM 的，非必要不使用

❤️ 组件通信

💛 父子通信

父 --->>> 子 ：

• 父组件将数据传递进子组件（属性名怎么写都可以）
• 子组件通过 props 接收（props 里面包含了父组件传递过来的所有的数据）
  • props 是只读的

function Son (props) {
  console.log(props)
  return <div>this is son, {props.name}</div>
}

function App () {
  const name = 'this is app name'
  return (
    <div>
      <Son name={name} />
    </div>
  )
}

子 --->>> 父 ：

• 父组件传递一个函数给子组件
• 子组件接受这个函数，利用这个函数传递数据给父组件

function Son(props) {
  const sonMsg = 'this is son msg';

  return (
    <div>
      <button onClick={() => props.onGetSonMsg(sonMsg)}>
	      sendMsg
      </button>
    </div>
  );
}

function App() {
  const [msg, setMsg] = useState('');

  function getMsg(msg) {
    setMsg(msg);
  }

  return (
    <div>
      this is App, {msg}
      <Son onGetSonMsg={getMsg} />
    </div>
  );
}

💛 兄弟通信

兄弟通信本质是利用父子通信 ：子 --->>> 父，父 --->>> 子

💛 爷孙通信

爷孙通信可以使用 context 机制实现，但是我觉得不太优雅，还是借助父子通信来实现

❤️ 路由

基础配置 ：

• npm install react-router-dom
• 在 main.jsx 加入 <BrowserRouter>

将
createRoot(document.getElementById('root')).render(  
	<App/>
)
改为
createRoot(document.getElementById('root')).render(  
    <BrowserRouter>  
        <App/>,  
    </BrowserRouter>  
)