注释

{/* 此处是说明 */}

通过一对{}包含住注释内容

jsx基本使用

jsx中使用{}来引用js的变量、函数、对象等

引用变量

function App() {
  const name = "张三";
  const age = 18;
  return (
    <div className="App">
      {/* 引用变量 */}
      {name}{age}
    </div>
  );
}

引用函数

function App() {
  const getName = () => {
    return "李四";
  }
  return (
    <div className="App">
      {/* 引用函数 */}
      {getName()}
    </div>
  );
}

引用对象

function App() {
  const obj = {
    name: "张三",
    age: 18,
  }
  return (
    <div className="App">
      {/* 引用对象 */}
      {obj.name}
    </div>
  );
}

引用数组

function App() {
  const list = [1, 2, 3, 4, 5];
  return (
    <div className="App">
      {/* 引用数组 */}
      {list.map((item) => {
        return <div key={item}>{item}</div>;
      })}
    </div>
  );
}

条件渲染

运算符判断

const ConditionalRender = () => {
  const isLoggedIn = false;
  return (
    <div>
      {/* 使用条件运算符来根据条件渲染元素 */}
      {isLoggedIn?<span>已登陆</span>:<span>未登陆</span>}
      {/* 使用&&运算符来根据条件渲染元素 */}
      {isLoggedIn && <span>已登陆</span>}
    </div>
  )
}

使用if-else语句判断

const ConditionalRender = () => {
  const isLoggedIn = false;
  if(isLoggedIn){
    return <span>已登陆</span>
  }else {
    return <span>未登陆</span>
  }
}

列表渲染

export default function ListRender () {
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  )
}

事件

export default function ListRender() {
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  const handleClick = () => {
    console.log('clicked')
  }
  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={handleClick}>
          {item}
        </li>
      ))}
    </ul>
  )
}

类似原生写法，以on开头的驼峰写法

如果需要传入事件对象，可以直接在函数体中接收

export default function ListRender() {
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  const handleClick = (e) => {
    console.log('clicked', e)
  }
  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={handleClick}>
          {item}
        </li>
      ))}
    </ul>
  )
}

但如果同时需要传入事件对象和当前item时

return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={ (event) => { handleClick(item, event)}}>
          {item}
        </li>
      ))}
    </ul>
  )

useState

在 React 中，useState 是一个用于创建状态变量的钩子函数。它允许你在函数组件中添加状态，并在状态发生变化时重新渲染组件

简单事例

const AddNumber = () => {
  const [num, add] = useState(0)
  return (
    <div>
      {num}
      <button
        onClick={() => {
          add(num + 1)
        }}
      >
        add
      </button>
    </div>
  )
}

上面定义了一个名为 AddNumber 的 React 组件，它的功能是在页面上显示一个数字，并提供一个按钮来增加这个数字。

const [num, add] = useState(0)：使用了 useState 钩子来管理组件的状态。num 是一个状态变量，初始值为 0，代表当前显示的数字。add 是一个函数，用于更新 num 状态的值。

表单受控

表单受控本质就跟vue的表单双向绑定一样，其实现的方式本质也差不多。

import { useState } from "react";

const Form = () => {
  const [val, setval] = useState("");
    return (
      <div className="form">
        <span>{val}</span>
        <input type="text"  value={val} onChange={(e) => { setval(e.target.value) }} />
      </div>
    );
  };
  
  export default Form;

使用 useState 钩子（hook）来初始化一个名为 val 的状态变量，其初始值为空字符串，并返回一个包含该值的数组以及更新该值的函数
<input> 元素，它绑定到 val 状态变量。value 属性设置为 val，确保输入框中的值与状态同步。onChange 事件处理器调用 setVal 函数来更新 val，当用户在输入框中输入内容时，e.target.value 捕捉到输入的值，并传递给 setVal。

获取dom

react中使用useRef 钩子来获取素的引用,

然后通过.current 引用获取 DOM 元素对象

import { useRef } from "react";

const Getdom = ( ) => {
    const mydom = useRef(null);
    const handleClick = () => {
        mydom.current.style.color = "red";
    }
    return (
        <div>
            <h1 ref={mydom} onClick={handleClick}>Hello</h1>
        </div>
    )
}

react基础

注释