React 基础篇(一)

💻 React 基础篇(一)🏠专栏:React

👀个人主页:繁星学编程🍁

🧑个人简介:一个不断提高自我的平凡人🚀

🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀

👊格言:☀️没有走不通的路,只有不敢走的人!☀️

👉让我们一起进步,一起成为更好的自己!!!🎁

文章目录

  • [React 基础知识篇(一)](#React 基础知识篇(一))
    • react是什么?
      • [(1) 重要版本变更](#(1) 重要版本变更)
      • [(2) 项目创建](#(2) 项目创建)
      • [(3) 抽离配置文件](#(3) 抽离配置文件)
    • 组件的写法
      • [(1) 函数组件](#(1) 函数组件)
      • [(2) 类组件](#(2) 类组件)
      • [(3) 组件嵌套](#(3) 组件嵌套)
      • [(4) 两个组件的区别](#(4) 两个组件的区别)

React 基础知识篇(一)

react是什么?

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

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

Plain 复制代码
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 以上

shell 复制代码
# 方式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的使用

shell 复制代码
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:入口文件 初始测试:

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

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

(2) 类组件

传参:this.props

js 复制代码
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) 组件嵌套

js 复制代码
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标签嵌套在所有标签的最外面

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

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

js 复制代码
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 使用不同:类组件可以获取子组件实例,函数式组件不可以,因为函数式组件没有实例。

:官方推荐使用函数式组件

结束语

希望对您有一点点帮助,如有错误欢迎小伙伴指正。

👍点赞:您的赞赏是我前进的动力!

⭐收藏:您的支持我是创作的源泉!

✍评论:您的建议是我改进的良药!

一起加油!!!💪💪💪

相关推荐
理想不理想v21 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我22 分钟前
浏览器交互事件汇总
前端·交互
YBN娜36 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=36 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck41 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13582 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端