React入门03-事件绑定、组件基础、useState基础、基础样式

React中的基础事件绑定

        在React中事件的绑定规则为如下所示。

on + 事件名 = { 将会触发的事件函数 }
eg. onClick={handleClick}

         如下图所示代码能够更清除的看到如何实现最基本的事件绑定。

const handleClick = () => {
  console.log('Button Clicked')
}

function App() {
  return (
    <div className="App">
      <button onClick={handleClick}>Click me to activate the Function</button>
    </div>
  );
}

        通过测试成功触发了函数。

事件中参数的绑定

        参数的传递和获取在这里将会介绍三种方式。

• 传递事件event参数
• 传递其它参数
• 传递event参数同时传递其它参数

        首先是最简单的传递event事件参数，如果没有其它参数需要 传递，那么直接在定义的事件处理函数中定义一个随意名字的参数（这里选取event），该参数用于接收事件对象。

const handleClick = (event) => {
  console.log(event)
}

function App() {
  return (
    <div className="App">
      <button onClick={handleClick}>Click me to activate the Function</button>
    </div>
  );
}

        其次是传递其它参数，注意在这里就不能写作 handleClick(args)的形式，而是要使用箭头函数来处理。

const handleClick = (message) => {
  console.log(message)
}

function App() {
  return (
    <div className="App">
      <button onClick={()=>{handleClick('this is a message')}}>Click me to activate the Function</button>
    </div>
  );
}

        接下来就是同时传递事件参数和其他参数，这里其实就很好理解了，直接在箭头函数处接收事件对象，然后再将事件对象传递给我们的处理函数，其他参数就正常处理就行，如下代码和图片所示。

const handleClick = (message, event) => {
  console.log(message)
  console.log(event)
}

function App() {
  return (
    <div className="App">
      <button onClick={(e)=>{handleClick('this is a message', e)}}>Click me to activate the Function</button>
    </div>
  );
}

React组件基础

为什么要使用组件？

        这里只会介绍主要的原因，首先就是为了代码的重复使用，降低维护成本和代码量。

// React 组件示例
const Button = ({ label }) => {
    return <button>{label}</button>;
};

// 在多个地方使用
<Button label="Submit" />
<Button label="Cancel" />

        其次就是模块化，将应用程序划分为独立的、可管理的部分，使得每个组件都能专注于自己的逻辑和UI，从而更易于开发和调试。

// Header 组件
const Header = () => <header>Header Content</header>;

// Footer 组件
const Footer = () => <footer>Footer Content</footer>;

// 主应用组件
const App = () => (
    <div>
        <Header />
        <main>Main Content</main>
        <Footer />
    </div>
);

         还有比较重要的原因就是为了可维护性，组件化使代码更加结构化和清晰，每个组件负责特定的功能，当需要修改某个功能时，只需调整相应的组件，而不会影响其他部分。这种独立性提高了代码的可维护性，特别是在大型应用中显得尤为重要。

React中组件的定义

        在React当中组件定义就是由大写名称的React组件函数定义，调用的时候通过单闭合标签或者双标签。

const MyButton = () => {
  return <button>this is a component</button>
}


function App() {
  return (
    <div className="App">
      {/* 单闭合标签调用 */}
      <MyButton />
      {/* 双闭合标签调用 */}
      <MyButton></MyButton>
    </div>
  );
}

useState的基础使用 

         useState是React提供的一个Hook，主要用于创建状态变量，以及定义状态变量的修改函数，useState的参数就是状态变量的初始值，通过setCount我们就能在更改状态变量的同时更新我们的渲染视图（也就是数据驱动视图），有点类似于Vue中的ref()变量，但在这里需要我们需要手动调用setCount()通过传递的参数手动替换掉count的值，触发试图的重新渲染。

        注意：直接修改状态变量的值是不会触发视图的重新渲染的，必须通过setState返回的修改的状态变量的函数修改，同时useState不能再顶层调用，只能在组件函数内或者一个React Hook函数内调用

        下面我们通过代码来看一下是如何使用，首先在函数组件中调用useState，定义状态变量和状态变量修改函数setCount，定义点击事件的处理函数，调用setCount从而触发视图的重新渲染。

import { useState } from 'react'

const MyButton = () => {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count + 1)
  }

  return <button onClick={handleClick}>{count}</button>
}


function App() {
  return (
    <div className="App">
      <MyButton />
    </div>
  );
}

        下面将是一个错误的示范，虽然说count的值会改变，但是并不会触发视图的渲染。

  const handleClick = () => {
    // setCount(count + 1)
    count += 1
  }

         对于对象和数组的数据更新也比较特殊，如下面的代码所示。

import { useState } from 'react';
import './index.css'

const MyButton = () => {
  const [obj, setObj] = useState({
    width: '100px',
    height: '100px',
    backgroundColor: 'red'
  });

  const [arr, setArr] = useState([1, 2, 3, 4, 5])

  const handleClilck = () => {
    setObj({
      ...obj,
      backgroundColor: 'blue'
    })
    setArr(arr.map((item) => item * 2))
  }

  return <button style={obj} onClick={handleClilck}>{arr}</button>
  
}


function App() {
  return (
    <div>
      <MyButton />
    </div>
  );
}

基础样式的控制 

        样式主要由行内样式和样式类控制，下面将逐一介绍这两种基本的样式控制方式。

行内样式（不推荐）

        首先是行内样式，在React组件内实现行内样式就是给style属性传递一个对象，对象可以预先定义，也可以直接写在标签内，如下代码所示（不推荐），注意样式的属性是使用小驼峰书写。

const divStyle = {
  width: '100px',
  height: '100px',
  backgroundColor: 'red'
};


function App() {
  return (
    <div className="App">
      <div style={divStyle}></div>
    </div>
  );
}

        也可以将样式直接写在标签内部。

function App() {
  return (
    <div className="App">
      <div style={{
      width: '100px',
      height: '100px',
      backgroundColor: 'red'
}}></div>
    </div>
  );
}

类控制 （推荐）

        和传统的class='类名'不同的是，React规定使用className='类名'，如下代码所示，新建一个index.css文件，书写.div-style类的样式，在App.js导入该样式让后在标签内使用。

        下面将先在index.css定义样式类。

.div-style {
    width: 100px;
    height: 100px;
    background-color: red;
  };
  

        使用定义好的样式类如下代码所示。

import './index.css'

function App() {
  return (
    <div className='div-style'>
    </div>
  );
}