react_basic_practice3

React 中的组件

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

组件化开发可以像搭积木一样构建一个应用

App 就是根组件

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

示例如下

//  这就是一个组件
function Button() {
    // 业务逻辑，组件逻辑
    return <button>click me!</button>
}


function App() {
    return (
        <>
            <div>
                {/*   自闭和  */}
                <Button/>
                {/* 成对标签 */}
                <Button></Button>
            </div>
        </>
    )
}

箭头函数也可以，首字母大写的 function 就行

//  这就是一个组件
const Button = () => {
    // 业务逻辑，组件逻辑
    return <button>click me!</button>
}

useState

useState 是一个 React Hook 函数，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

本质：和普通js不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）

示例代码如下

import {useState} from "react";

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

    // 点击事件的回调函数
    const handleClick = () => {
        // 作用 ---- 用传递的 count + 1, 修改成新值， 重新使用新值渲染UI
        setCount(count + 1)
    }

    return (
        <>
            <div>
                <button onClick={handleClick}>{count}</button>
            </div>
        </>
    )
}

useState(0) --- 返回的是一个数组

useState 修改状态的规则

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

即

let [count, setCount] = useState(0)

// 不能 count++  ---- 不能引发视图更新.

setCount(count + 1)  // 要用这种.

修改对象状态

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

import {useState} from "react";

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

    // 点击事件的回调函数
    const handleClick = () => {
        // 作用 ---- 用传递的 count + 1, 修改成新值， 重新使用新值渲染UI
        setCount(count + 1)
    }

    // 修改对象状态
    const [form, setForm] = useState({name: 'jack'})

    const changeForm = () => {
        // setForm({name: 'okkkkkkk'})
        setForm({
            ...form,   // 展开
            name: 'okkkkkkk'  // ---- 只修改 form中的 name 值
        })
    }

    return (
        <>
            <div>
                <button onClick={handleClick}>{count}</button>
                <button onClick={changeForm}>修改from{form.name}</button>
            </div>
        </>
    )
}

这个意思是： …form：将当前 form 对象中的所有属性和值都展开（拷贝）到一个新对象中。 name: ‘okkkkkkk’：在这个新对象中覆盖或设置 name 属性为 ‘okkkkkkk’。最终得到的是一个新的对象，它和原来的 form 一样，但其中的 name 字段被更新了。

组件基础样式控制

行内样式（不推荐）
class 类名控制

示例代码如下

/*  src/index.css */

.foo {
    color: orange;
}

// 导入样式
import './index.css'

const style = {
    color: 'blue',
    fontSize: '50px'
}

function App() {
    return (
        <>
            <div>
                {/*   行内样式 */}
                <span style={{color: 'red', fontSize: '50px'}}>this is span</span>
                <span style={style}>this is span</span>

                {/*    通过 class类名控制*/}
                <span className="foo">this is class foo </span>
            </div>
        </>
    )
}