【React】组件基础使用

news2024/11/17 20:45:19

1. react组件

在react中，组件就是首字母大写的函数，内部存放了组件的逻辑、UI，渲染组件只需要把组件当成标签书写。

使用组件有两种方式：自闭和、成对标签

function App() {
  // 定义组件
  function Component() {
    return <div>我是一个自定义组件</div>
  }
  return (
    <div className="App">
      {/* 方式1 */}
      <Component/>
      {/* 方式2 */}
      <Component></Component>
    </div>
  );
}

export default App;

在这里插入图片描述

2. useState使用

一个react hook（函数），允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质：状态变量发生变化，组件的UI也会跟着变化（数据驱动视图）

在这里插入图片描述
使用useState实现一个计数器

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0)
  function add() {
    // 作用：1、用传入的新值修改count的值
    // 2. 使用新的count渲染ui
    setCount(count + 1)
  }
  return (
    <div className="App">
      <button onClick={add}>{count}</button>
    </div>
  );
}

export default App;

3. useState修改状态的规则

状态不可变（状态只读，始终替换它而不是修改它，直接修改状态不能引发视图更新）
对于对象类型的状态变量，应始终传给set方法一个全新的对象来进行修改

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0)
  const [form, setForm] = useState({
    name: '赵四'
  })
  function add() {
    // 作用：1、用传入的新值修改count的值
    // 2. 使用新的count渲染ui
    setCount(count + 1)
  }
  function changeForm() {
    // 错误写法，直接修改
    // form.name = '刘能'

    // 正确写法
    setForm({
      ...form,
      name: '刘能'
    })
  }
  return (
    <div className="App">
      <button onClick={add}>{count}</button>
      <button onClick={changeForm}>hi，我是{form.name}</button>
    </div>
  );
}

export default App;