React.js系列教程-创建一个React新项目

官网：https://zh-hans.react.dev/

React.js和Vue.js都是前端比较流行的渐进式框架，甚至React.js的影响力要超过Vue.js 因为它诞生于facebook公司，在国外和国内大公司有非常大的影响力。

创建React项目

npm config set registry https://registry.npmmirror.com/

//创建项目
npx create-react-app my-app

  //进入并且启动项目
  cd my-app
  npm start

访问 http://localhost:3000/

工程结构介绍

public ---- 静态资源文件夹
	favicon.icon ------ 网站页签图标
	index.html -------- 主页面
	logo192.png ------- logo图
	logo512.png ------- logo图
	manifest.json ----- 应用加壳的配置文件
	robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
	App.css -------- App组件的样式
	App.js --------- App组件
	App.test.js ---- 用于给App做测试
	index.css ------ 样式
	index.js ------- 入口文件
	logo.svg ------- logo图
	reportWebVitals.js
		--- 页面性能分析文件(需要web-vitals库的支持)
	setupTests.js
		---- 组件单元测试的文件(需要jest-dom库的支持)

组件

React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！

文件 App.js 主要由三部分组成：顶部的 import 语句，中间的 App 组件，以及底部的 export 语句。大多数 React 组件都遵循这个模式。

return （）内的Html代码是react的即将渲染UI模板，也就是vue中的<template>，这种混合语法是称为 JSX；

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。

Vue和React 对比

React代码

Vue代码

响应式变量

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


function App() {
  const  [ count ,setCount] =useState(10)
  
  return (
      <>
           <div>结果：  {count}</div>
          <button type='button' onClick={()=>{ setCount(count+1)}}>添加</button>

      </>
  );
}

export default App;

如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来。
例如，你可以使用一个 div 标签：
如果你不想在标签中增加一个额外的 div，可以用 <> 和 </> 元素来代替：

在 React 中，useState 函数用来定义响应式变量，她会记忆组件的状态，成为State 跟Vue3中的ref功能类似.

useState 的唯一参数是 state 变量的初始值。在这个例子中，count的初始值被useState(0)设置为 0。

每次你的组件渲染时，useState 都会给你一个包含两个值的数组：

• state 变量 (count) 会保存上次渲染的值。

• state setter 函数 (setCount) 可以更新 state 变量并触发 React 重新渲染组件。

在React中 ，任何其他以“use”开头的函数都被称为 Hook。
Hooks ——以 use 开头的函数——只能在组件或自定义 Hook 的最顶层调用。 你不能在条件语句、循环语句或其他嵌套函数内调用 Hook。Hook 是函数，但将它们视为关于组件需求的无条件声明会很有帮助。在组件顶部 “use” React 特性，类似于在文件顶部“导入”模块。

列表渲染

在这样的场景下，可以把要用到的数据存入 JavaScript 对象或数组，然后用 map() 或 filter() 这样的方法来渲染出一个组件列表。

import logo from './logo.svg';
import './App.css';

import {useState} from 'react';


function App() {
    const [count, setCount] = useState(100)
    const [list, setList] = useState([
        {
            id: "A",
            name: "张三",
            address: "内蒙古赤峰市",
            sex: 1
        },
        {
            id: "B",
            name: "里斯",
            address: "新疆阿拉尔",
            sex: 0
        }


    ])


    const listItems = list.map(item =>
        <tr>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.address}</td>
            <td>{item.sex}</td>
        </tr>
    );


    return (
        <>
            <div>欢迎来到React.js课堂 学费 {count} 元</div>
            <button onClick={() => {
                setCount(count + 1)
            }}>按钮
            </button>
            <table>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>地址</th>
                    <th>性别</th>
                </tr>
                {listItems}

            </table>

        </>

    );
}


export default App;

条件渲染

通常你的组件会需要根据不同的情况显示不同的内容。在 React 中，你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。

   
    /**
     * 自定义个函数组件写法
     * @param sex
     * @returns {JSX.Element}
     * @constructor
     */
    const  SexItem = ({value})=>{
        if (value) {
            return <span className="item">{'男'} </span>;
        }
        return <span className="item">{'女'} </span>;

    }



    const listItems = list.map(item =>
        <tr>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.address}</td>
            <td><SexItem value={item.sex}/></td>
        </tr>
    );

或

    //直接使用三目运算符
    const listItems = list.map(item =>
        <tr>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.address}</td>
            <td>{item.sex ==1?'男':'女的'}</td>
        </tr>
    );

useEffect Hook（钩子）

在 React 中，useEffect 是一个钩子（Hook），它允许你在组件中执行副作用操作。副作用可能包括数据获取、直接更新 DOM 或设置计时器等。useEffect 接受两个参数，第二个参数是可选的。
useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

//该案例来自 https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;

上面例子中，useState()用来生成一个状态变量（data），保存获取的数据；useEffect()的副效应函数内部有一个 async 函数，用来从服务器异步获取数据。拿到数据以后，再用setData()触发组件的重新渲染。

由于获取数据只需要执行一次，所以上例的useEffect()的第二个参数为一个空数组。