💻 React 基础篇(一)🏠专栏:React
👀个人主页:繁星学编程🍁
🧑个人简介:一个不断提高自我的平凡人🚀
🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀
👊格言:☀️没有走不通的路,只有不敢走的人!☀️
👉让我们一起进步,一起成为更好的自己!!!🎁
文章目录
- [React 基础知识篇(一)](#React 基础知识篇(一))
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
指令抽离配置文件
抽离配置文件过程中注意事项
- 确保项目的 git 仓库是最新的
- 如果不需要对于 webpack 进行配置,那么不需要抽离配置文件
- 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) 两个组件的区别
- 组件的定义方式不同。
- 生命周期不同:类组件有,函数式组件没有。
- 副作用操作执行不同:class 组件通过生命周期函数,函数组件用 Hooks 的 useEffect。
- state 的定义、读取、修改方式不同:函数组件用 hook 的 useState。
- this: class 组件有,函数式组件没有。
- 实例: class 组件有,函数时组件没有。
- ref 使用不同:类组件可以获取子组件实例,函数式组件不可以,因为函数式组件没有实例。
注:官方推荐使用函数式组件
结束语:
希望对您有一点点帮助,如有错误欢迎小伙伴指正。
👍点赞:您的赞赏是我前进的动力!
⭐收藏:您的支持我是创作的源泉!
✍评论:您的建议是我改进的良药!
一起加油!!!💪💪💪