组件

组件

概念:一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

React组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图U，渲染组件只需要把组件当成标签书写即可

//定义组件 （首字母大写）
const Button = () => {

    //业务逻辑组件
    return <button>click me !</button>
}

function App() {

    return (
        <div className="App">

            {/* 组件渲染 */}
            {/* 自闭和 */}
            <Button/>
            {/* 成对标签 */}
            <Button></Button>
        </div>
    );
}

useState

usestate 是一个 React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质:和普通IS变量不同的是，状态变量一旦发生变化组件的视图Ul也会跟着变化(数据驱动视图)

const [count, setCount] = useState(0)

• useState是一个数，返回值是一个数组
• 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
• useState的参数将作为count的初始值

//useState实现一个计数器按钮
import {useState} from "react";

function App() {
   
    // 调用useState添加一个状态变量
    // count状态变量
    // setCount修改状态变量的方法
    let [count, setCount] = useState(0)

    // 作用 1.用传入的新值修改count
    // 2.重新使用新的count渲染UI
    const changeCount = () => {
        setCount(count + 1)
    }

    return (
        <div className="App">
            <button onClick={changeCount}>{count}</button>
        </div>
    );
}

修改状态规则

• 状态不可变

  在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

  let [count, setCount] = useState(0)
  
  const changeCount = () => {
      
      //直接修改 无法引发视图的更新
      count++
      setCount(count + 1)
  }
  
  // 这里是正确的做法
  const changeCount = () => {
      setCount(count + 1)
  }
  

• 修改对象状态

  规则:对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

  //直接修改原对象，不引起视图变化
  
  let [form,setForm] = useState({
      name: 'jack'
  })
  
  const handleChangeName = () => {
      form.name = 'john'
  }
  
  //调用set传入新对象用于修改
  let [form,setForm] = useState({
      name: 'jack'
  })
  
  const handleChangeName = () => {
      setForm({
          ...form,
          name: 'john'
      })
  }
  

组件基础样式方案

React组件基础的样式控制有俩种方式

1.行内样式(不推荐)

<div style={{color: "red"}}>this is div</div>

2.class类名控制(推荐)

//index.css
.foo {
    color: red;
    font-size: 50px;
}

//App.js
import './index.css'

function App() {

    return (
        <div className="App">
            <span className='foo'>这是一个样式</span>
        </div>
    );
}