带你入门React

巧克力小猫猿

于 2024-05-09 12:05:37 发布

阅读量1k

点赞数 15

文章标签： reactjs typescript

本文链接：https://blog.csdn.net/zxdznyy/article/details/138574783

版权

前言

笔者之前的工作经验都局限于Vue，今天稍稍体验React，记录相关历程。

一，基本配置

1.1 环境搭建

项目比较好跑。配置好Node环境和淘宝镜像。

在全局下载webpack和react环境，终端中去进行配置。

npm i -g webpack

npm i -g create-react-app

create-react-app my-project

如果在create的过程中报错，可能是权限问题。cmd管理员权限再次创建即可。

观察package.json文件，react的启用指令为：
在这里插入图片描述

npm run start

项目跑起，轻轻松松：
在这里插入图片描述
如果要做ts方向，在下载时候：

create-react-app my-project --template typescript

其他流程一样。

具体参考的文档为，react中文网。
react中文网

1.2 页面初始化渲染

整个React项目的渲染，是在src中的index文件中

这里我用的是ts，所以index文件名为Index.tsx

我们可以通过修改render中渲染的组件来确定页面默认渲染的是什么：

在这里插入图片描述
这一点跟Vue中的render比较像。

二，基础学习

2.1 结构与样式开发

看了文档，发现react是函数开发。

之前做Vue，Vue的模板、样式、行为都是区分开写的。但是在react中，所有的东西都是js。

所有组件开头必须大写（命名规范），以及仔细观察这个return，Vue中的return出来的都是花括号，对react来说，是小括号；

react所有的标签都必须是闭合状态；

import './App.css';

// 声明按钮组件
function MyButton() {
  return (
    <button>引入一个基本的按钮组件</button>
  )
}

function App() {
  return (
    <div className="App">
      {/* 嵌套组件 */}
      <MyButton></MyButton>
    </div>
  );
}

export default App;

2.2 数据展示

上一节的代码中，有没有观察到，注释由花括号包裹。

官网有写，虽然结构也放在js代码中，但是正儿八经的js代码，其实是放在大括号中的。这样就可以从代码中嵌入一些变量并展示给用户。

在数据展示这一块，Vue中的模板语法用到最多的是双花括号{{}}，但是react，数据展示按照js来定，因此看到的数据其实都是放在一个花括号中。

// 变量声明
let state : {
  name: String,
  date: String
} = {name: "zxd", date: "111"}

// 声明按钮组件
function MyButton() {
  return (
    <button className="btn">引入一个基本的按钮组件222</button>
  )
}

function App() {
  return (
    <div className="App">
      {/* 嵌套组件 */}
      <MyButton></MyButton>
      <p>{ state.date }</p>
    </div>
  );
}

效果展示：
在这里插入图片描述

2.3 行内样式

行内样式的写法有些不一样：

function App() {
  return (
    <div className="App">
      {/* 嵌套组件 */}
      <MyButton></MyButton>
      <p style={{ color: "red" }}>{ state.date }</p>
    </div>
  );
}

行内样式的写法并不特殊，是因为，style里面本来就是js的对象，所以第一个括号代表里面是js代码，第二个括号是js中的对象。

上文其实说过，在react中什么都可以用js写，在这里就表现出来了。

2.4 条件渲染

Vue的条件渲染有特殊写法，v-if和v-show。React中没有特殊语法来写条件语句

// 对name进行条件判断
if(state.name == "zxd") {
  state.date = "666nb"
} else {
  state.date = "1112"
}

2.5 列表渲染

列表渲染，一次性渲染很多条数据。类似于Vue的v-for。

// 定义产品变量 对象类型的数组
const products: Array<{ title: String, id: Number }>
    = [{ title: "产品1", id: 1 }, { title: "产品2", id: 2 }, { title: "产品3", id: 3 }]

let key: Number


// h5页面上的子节点渲染
const listItems = products.map(item =>
    <li {...key = item.id}>
        {item.title}
    </li>
)

// 声明按钮组件
function MyButton() {
    return (
        <>
            <div>
                <ul>{listItems}</ul>
            </div>
        </>
    )
}

原理类似于Vue，只不过要注意，key是js代码，花括号包裹。这个key属性，是该li的唯一标识，后续插入、删除、重排，都需要依靠提供的key来控制。

2.6 点击事件

// 声明按钮组件
function MyButton() {
    function clickDiv() {
        console.log("click了一下")
    }
    return (
        <>
            {/* 点击事件 */}
            <div onClick = {clickDiv}>click it</div>
            <div>
                <ul onClick={clickDiv}>{listItems}</ul>
            </div>
        </>
    )
}

这里要注意的是，组件的点击事件，在组件内部的函数中去写。

三，页面更新

3.1 组件数据

组件会有一些独有的数据，比如一个按钮被点击的次数。如果想把这些信息展示出来，则需要从React中引入useState。

// 更新页面需要用到的                       
import { useState } from 'react';
// 声明按钮组件
function MyButton() {
    // 可以在每个组件中都声明state变量 
    // 为什么是count和setCount，count是当前的state，更新它的函数是setCount，也可以起任何名字
    // 一般起名字都是A，setA为它们命名
    const [ count, setCount ] = useState(0)
    const [ count1, setCount1 ] = useState(2)
    function clickDiv() {
        console.log("click了一下")
        setCount(count + 1)
    }
    function clickDiv2() {
        console.log("另一个组件")
        setCount1(count1 + 1)
    }
    return (
        <>
            {/* 点击事件 */}
            <button onClick = {clickDiv}>{ count }</button>
            <button onClick = {clickDiv2}>{ count1 }</button>
        </>
    )
}

useState是一个组合，左边的数组里面是初始值和控制初始值的函数。右边的括号是初始值。在组件中的一次定义就是定义了一个值。

上述代码中的两个值互不影响，没有关系。

在这里插入图片描述
哪怕多次渲染同一个组件，每个组件都会有自己的state，互不影响。

3.2 组件数据共享

组件数据共享，类似于Vue中的props

请看代码：

import { useState, FC } from 'react'

const MyApp: FC = () => {
    const [count, setCount] = useState<number>(0)

    function handleClick() {
        setCount(count + 1)
    }

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

const MyButton: FC<{count:number, onClick:() => void}> = ({count, onClick}) => {
    return(
        <>
            <button onClick={onClick}>组件之间数据的共享按钮{count}</button>
        </>
    )
}

export default MyApp