React 基础篇（一）

React 基础篇（一）专栏：React
个人主页：繁星学编程
个人简介：一个不断提高自我的平凡人
分享方向：目前主攻前端，其他知识也会阶段性分享
格言：☀️没有走不通的路，只有不敢走的人！☀️
让我们一起进步，一起成为更好的自己！！！

React 基础知识篇（一）

react是什么？

官方解释：React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

vscode中React有助于快捷开发的插件：

ES7+ React/Redux/React-Native snippets
// 代码段快捷键：
React-Native/React/Redux/React-Native...

(1) 重要版本变更

序号	版本号	发版时间	重要更新
1	16	2017 年 9 月 26	引入 es6 的类组件
2	16.3	2018 年 4 月 3 日	生命周期更新
3	16.4	2018 年 5 月 23 日	生命周期更新
4	16.8	2019 年 2 月 6 日	引入 react hooks
5	17.0	2020 年 10 月 20 日	过渡版本
6	18.0	2022 年 3 月 29 日	写法改变，严格模式发生改变

(2) 项目创建

create-react-app 脚手架使用

需要保证电脑安装 node 版本在 14 以上，系统在 win7 以上

# 方式1:使用npx
$ npx create-react-app react-basic
# 方式2:使用npm
$ npm init react-app react-basic
# 方式3:使用yarn
$ yarn create react-app react-basic

yarn的使用

yarn的安装：npm i yarn tyarn -g
安装依赖：
  npm i xxx -g  ->  yarn add xxx -global
  npm i xxx -S  ->  yarn add xxx
  npm i xxx -D  ->  yarn add xxx -dev
  npm i         ->  yarn

项目初始化目录：

项目启动：yarn start

React 单页面应用 目录分析：

• manifest.json：图片适配
• robots.txt：seo优化
• yarn.lock：版本锁定

(3) 抽离配置文件

eject指令用于抽离配置文件

cra脚手架基于webpack，默认webpack的配置在 node_modules下的react-scripts 内部,但是一般情况下，传输代码时，不会上传 node_modules，那么在必要情况下就必须得抽离配置文件。

通过npm run eject或者cnpm run eject 或者yarn eject指令抽离配置文件

抽离配置文件过程中注意事项

1. 确保项目的 git 仓库是最新的
2. 如果不需要对于 webpack 进行配置，那么不需要抽离配置文件
3. create-react-app v2 默认支持 ts 以及 sass 以及 css 的模块化，如果使用 sass 作为 css 预处理器，那么不需要抽离配置文件

抽离后项目目录产生文件夹：config和scripts

index.js：入口文件 初始测试：

// 引入react
import React from 'react'
// 引入reactDom
// 浏览器端引入reactDom,app端引入react-native
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root'))
// jsx语法：允许我们在js文件里面写html
// 可以将我们写的html代码转成虚拟DOM
const msg = 'react!!!'
root.render(<div>hello {msg}</div>)

组件的写法

组件的命名：首字母大写，拓展名（js或jsx）

变量名如果是小写字母开头的，认为是标签
变量名如果是大写字母开头的，认为是组件

(1) 函数组件

传参：props

const App = (props) => {
    return <div>hello {props.msg}!</div>;
};
// 组件实例化
root.render(<Header msg="world"/>);

(2) 类组件

传参：this.props

class App extends React.Component {
    render() {
        // 在类组件里面，不知道怎么做的时候，就打印this
        console.log(this);
        return <div>hello {this.props.msg}</div>;
    }
}

// root.render(app("world"));
// root.render(app({ msg: "world" }));
// 将组件变成标签的过程就是组件实例化的过程
root.render(<App msg="world" />);

(3) 组件嵌套

import React,{Component,Fragment} from "react";

class Msg extends Component{
    render(){
        return <div>msg</div>
    }
}

const App = ()=>{
    return <Fragment>
    <div>组件嵌套</div>
    <Msg></Msg>
    </Fragment>
}

export default App;

注：组件中必须有一个根标签

解决组件中必须有一个根标签
方式一： 使用Fragment标签嵌套在所有标签的最外面

import { Fragment } from 'react'
class App extends React.Component{
  render() {
      return <Fragment>
          <div>Hello</div>
          <div>World</div>
      </Fragment>
  }
}

方式二： 在所有标签最外面套一层<>

const Home = () => {
  return <>
      <div>Hello</div>
      <div>World</div>
  </>
}

以上两种方式的本质还是共用同一个父组件，但是不会产生新标签，只做占位符，与Vue中的template标签作用相同

(4) 两个组件的区别

1. 组件的定义方式不同。
2. 生命周期不同：类组件有，函数式组件没有。
3. 副作用操作执行不同：class 组件通过生命周期函数，函数组件用 Hooks 的 useEffect。
4. state 的定义、读取、修改方式不同：函数组件用 hook 的 useState。
5. this： class 组件有，函数式组件没有。
6. 实例： class 组件有，函数时组件没有。
7. ref 使用不同：类组件可以获取子组件实例，函数式组件不可以，因为函数式组件没有实例。

注：官方推荐使用函数式组件

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！