最近准备跟着黑马React学一下React,扩充一下技术面,打算还是以一边学习一边记笔记为主,进行学习!
1. React介绍
1.1. React是什么?
React是由FaceBook现在称(Meta)开发的开源 JavaScript 库,主要用于构建用户界面,特别是单页应用(SPA)。它采用组件化的方式组织代码,使得复杂 UI 的开发和维护变得更为高效和灵活。
1.2. React的优势
React相比于传统的 DOM 操作和页面构建方式,有更大的优势:
① 虚拟 DOM: React 使用虚拟 DOM(Virtual DOM)来提高性能。虚拟 DOM 是内存中的数据结构,当组件状态改变时,React 计算出最小的 DOM 更新,而不是直接操作实际 DOM,这减少了不必要的渲染和提升了性能。
② 组件化: React 应用基于组件构建,每个组件都是独立的、可复用的代码单元。这种方式促进了代码的模块化,提高了代码的可读性和可维护性。
③ JSX: JSX 语法使得在 JavaScript 中编写 HTML 代码变得简单,提高了开发效率。它允许开发者直接在组件内声明 UI 结构,使得代码更直观。
④ 单向数据流: React 应用通常遵循单向数据流的设计原则,即数据从父组件流向子组件,简化了数据管理和调试。
**⑤ 性能优化:**React 提供了如 shouldComponentUpdate、React.PureComponent 和 React.memo 等机制,帮助开发者优化性能,避免不必要的组件更新。
1.3. React的市场
React目前在国内用的应该是没有Vue多的,它在国外还有国内一些中大厂比较流行。
2. 开始入门学习React
这个是React的官方中文文档:React 官方中文文档,初学的时候可以进去看几眼。
2.1. create-react-app搭建React开发环境
进行 React开发,首先要进行环境的开发,来看看咋搭建的吧!
create-react-app是一个快速创建React开发环境的工具,底层由Webpack构建,封装了配置细节,开箱即用,下面是指令的使用和介绍:
bash
npx create-react-app first-react-project
1. npx Node.js工具命令,查找并执行后续的包命令
2. create-react-app 核心包(固定写法),用于创建React项目
3. react-basic React项目的名称(可以自定义)
出了点状况,一直搭建不成功,查了一下npm的镜像,发现:
bash
$ npm config get registry
https://registry.npmjs.org/
居然是这个,赶紧换成淘宝源:
bash
npm config set registry https://registry.npm.taobao.org
重新运行create-react-app
终于成功了...使用WebStorm打开这个项目,启动一下还有看看目录结构:
bash
npm start
(看到这个说明项目搭建成功了,hhh)
接着我们来看看这个项目的结构,下面我对主要的文件的文件夹进行了标注:
我们打开项目的入口文件index.js,如下代码介绍了:React入口文件就是把App根组件渲染到index.html中的<div id="root"></div>中,大概渲染路径就是App -> index.js -> public/index.html
javascript
// React的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入项目的根组件
import App from './App';
// 把App根组件渲染到id为root的dom节点上,其实就是index.html中的<div id="root"></div>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
2.2. JSX基础学习
1. 基础概念
JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式:
javascript
function App() {
return (
<div className="App"> // html组件直接写入js
Hello React
</div>
);
}
export default App;
这种结合了html + Js写法的优势在于既拥有了HTML的声明式模版写法 也拥有了JS的可编程能力,对于页面的操控会更加便捷。
本质上JSX并不是标准的JS语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具比如Babel · Babel做解析之后才能在浏览器中运行,我们可以去官网试一试:
2. JSX中使用JS表达式
在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等,直接手写代码尝试,初学阶段要多写hhh:
javascript
function App() {
const number = 1;
const getNumber = () =>{
return 100;
}
return (
<div className="App">
{/* 1. 使用引号传递字符串*/}
{'hello world'}
{/* 2. 使用Javascript变量*/}
{number}
{/* 3. 函数调用 */}
{getNumber()}
{/* 4. 方法调用 */}
{new Date().getTime()}
{/* 5. 使用JavaScript对象 */}
<div style={{color:'red'}}>this is red</div>
</div>
);
}
export default App;
3. JSX中实现简单列表渲染
javascript
function App() {
const list = [
{id: 1001, name:'Vue'},
{id: 1002, name:'Java'},
{id: 1003, name:'Cpp'},
]
return (
<div className="App">
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
);
}
export default App;
4. JSX中实现条件渲染
在React中,可以通过逻辑( if - else if - else )与运算符(&&)、三元表达式(?:)实现基础的条件渲染
javascript
function App() {
const articleType = 1; // 1 = article, 2 = video
const getArticle = () => {
if(articleType === 1){
return <div>我是文章</div>
}else{
return <div>我是视频</div>
}
}
return (
<div className="App">
{getArticle()}
</div>
);
}
export default App;
2.3. React事件绑定
1. React基础事件绑定
语法:on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法
2. 使用事件对象参数
语法:在事件回调函数中设置形参e
3. 传递自定义参数
语法:事件绑定的位置改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参,不能直接写函数调用,这里事件绑定需要一个函数引用。
4. 同时传递事件对象和自定义参数
语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应
2.4. React组件
一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次。
在React中,一个组件就是首字母大写的函数 ,内部存放了组件的逻辑和视图UI , 渲染组件只需要把组件当成标签书写即可。
2.5. useState
useState 是一个 React Hook(函数),它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。本质:和普通JS变量不同的是,状态变量一旦发生变化组件的视图UI也会跟着变化(数据驱动视图)和之前学习过的Vue3.0使用ref 和 reactive是一样的效果
javascript
const [count, setCount] = useState(0);
1. useState是一个函数,返回值是一个数组
2. 数组中的第一个参数是状态变量,第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值
下面写一个实例进行测试:
javascript
import {useState} from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<button onClick={() => setCount(count + 1)}>count is {count}</button>
</div>
);
}
export default App;
useState 修改状态的规则:
在React中,状态被认为是只读的,我们应该始终替换它而不是修改它,直接修改状态不能引发视图更新。
javascript
import {useState} from "react";
function App() {
const [count, setCount] = useState(0);
const clickHandler = () => {
// 直接修改无法更新视图
// count ++;
// setCount(count);
setCount(count + 1);
}
return (
<div className="App">
<button onClick={clickHandler}>count is {count}</button>
</div>
);
}
export default App;
对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改:
javascript
import {useState} from "react";
function App() {
const [user, setUser] = useState({
name: "John",
age: 20,
email: "john@gmail.com"
});
const clickHandler = () => {
// 直接修改原对象,不引发视图变化
// user.name = "Jane";
// 调用set传入新对象用于修改
setUser({
...user,
name: "Jane",
age: 30,
email: "jane@gmail.com"
});
}
return (
<div className="App">
<button onClick={clickHandler}>count is {user.name}</button>
</div>
);
}
export default App;
2.6. 组件的CSS怎么写?
React组件基础的样式控制有俩种方式:
- 行内样式(No!)
- Class类名控制
已经晚上了,今天就写到这儿吧!