科技公司的网站建设费入什么科目,给别人做网站用什么,网站后台图片传不上去怎么办,wordpress文本编辑器React初探#xff1a;从环境搭建到Hooks应用全解析
一、React介绍
1、React是什么
React是由Facebook开发的一款用于构建用户界面的JavaScript库。它主要用于构建单页面应用中的UI组件#xff0c;通过组件化的方式让开发者能够更轻松地构建可维护且高效的用户界面。
Reac…React初探从环境搭建到Hooks应用全解析
一、React介绍
1、React是什么
React是由Facebook开发的一款用于构建用户界面的JavaScript库。它主要用于构建单页面应用中的UI组件通过组件化的方式让开发者能够更轻松地构建可维护且高效的用户界面。
React的核心思想是组件化将UI拆分成独立且可复用的部分每个部分被称为组件。这种组件化的开发方式使得代码更易于理解、维护和测试。
2、React的优势 虚拟DOM React引入了虚拟DOM的概念通过在内存中构建虚拟DOM树然后与实际DOM进行比较只对必要的部分进行更新提高了性能。 组件化 React的组件化开发模式使得代码更具可复用性和可维护性加速了开发过程。 单向数据流 React采用了单向数据流的架构数据的流动是单向的易于追踪和调试。 生态系统 丰富的生态系统和大量的第三方库使得开发者能够更便捷地集成其他工具和解决方案。
二、开发环境搭建
1、使用create-react-app快速搭建开发环境
为了快速启动React项目我们可以使用create-react-app工具。这是一个官方提供的命令行工具它会自动配置一个现代化的React开发环境让开发者无需关心复杂的配置。
# 使用npx创建React应用
npx create-react-app my-react-app# 进入项目目录
cd my-react-app# 启动开发服务器
npm start通过以上简单的几步你就能够在本地快速搭建一个React应用的开发环境。在浏览器中打开http://localhost:3000即可查看你的第一个React应用。
入门网站https://zh-hans.react.dev/learn
三、JSX基础-概念和本质
1、什么是JSX
JSX即JavaScript XML是一种在JavaScript代码中嵌入XML/HTML结构的语法扩展。它是React的一项核心特性使得在JavaScript中编写UI组件更加直观和便捷。JSX看起来类似于XML/HTML但实际上它更接近JavaScript。
在React中JSX允许我们使用类似HTML的语法来描述UI组件的结构然后通过Babel等工具将其转换为JavaScript代码。
2、JSX的本质
尽管JSX看起来像是HTML但它的本质是通过React.createElement函数转换为React元素。React.createElement接受三个参数类型组件类型或HTML标签名、属性对象和子元素。这个过程被称为JSX的“编译”过程它将JSX代码转换为React元素的层次结构。
例如下面的JSX代码
const element div classNamemy-classHello, React!/div;将被转换为
const element React.createElement(div, { className: my-class }, Hello, React!);四、JSX基础-高频场景
1、JSX中使用JS表达式
在JSX中我们可以使用花括号 {} 包裹JavaScript表达式将其嵌入到JSX中。这使得我们能够动态地生成内容例如
const name World;
const greeting divHello, {name}!/div;2、JSX中实现列表渲染
使用JSX我们可以方便地进行列表渲染。通过使用数组的map方法我们可以将一个数据数组映射为一组JSX元素例如
const items [Item 1, Item 2, Item 3];
const list ul{items.map(item li key{item}{item}/li)}/ul;3、JSX中实现条件渲染
在JSX中实现条件渲染有多种方式其中两种常见的方式包括逻辑与运算符()和三元表达式。
3.1 逻辑与运算符()
使用逻辑与运算符()可以根据条件决定是否渲染特定的内容。当条件为真时右侧的内容会被渲染否则返回一个空的React元素null如下所示
const isLoggedIn true;const loginStatus (divpUser is logged in./p/div
);const app (div{isLoggedIn loginStatus}/div
);在上述例子中如果isLoggedIn为true则loginStatus会被渲染否则它不会出现在最终的渲染结果中。
3.2 三元表达式
另一种常见的条件渲染方式是使用三元表达式它允许根据条件选择不同的内容进行渲染
const isLoggedIn true;const greeting (div{isLoggedIn ? pWelcome back!/p : pPlease log in./p}/div
);在上述例子中如果isLoggedIn为true则渲染Welcome back!“否则渲染Please log in.”。
这两种方式都为React中的条件渲染提供了灵活的选择开发者可以根据具体情况选择适合的方式。
五、React中的事件绑定
1、React基础事件绑定
在React中事件绑定是通过将事件处理函数传递给特定事件的属性来实现的。例如要在按钮被点击时执行某个函数可以使用onClick属性
class MyComponent extends React.Component {handleClick () {console.log(Button clicked!);};render() {return (button onClick{this.handleClick}Click me/button);}
}2、使用事件对象参数
如果需要在事件处理函数中访问事件对象可以将事件对象作为参数传递给事件处理函数
class MyComponent extends React.Component {handleClick (event) {console.log(Button clicked!, event);};render() {return (button onClick{this.handleClick}Click me/button);}
}3、传递自定义参数
有时候需要将自定义参数传递给事件处理函数。这可以通过使用箭头函数或.bind()方法来实现
class MyComponent extends React.Component {handleClick (customParam) {console.log(Button clicked with custom param:, customParam);};render() {const customParam Custom Parameter;return (button onClick{() this.handleClick(customParam)}Click me/button);}
}4、同时传递事件对象和自定义参数
如果需要同时传递事件对象和自定义参数可以通过在箭头函数中调用另一个函数并传递参数的方式实现
class MyComponent extends React.Component {handleClick (event, customParam) {console.log(Button clicked!, event, Custom param:, customParam);};render() {const customParam Custom Parameter;return (button onClick{(event) this.handleClick(event, customParam)}Click me/button);}
}六、React中的组件
1、组件是什么
在React中组件是构建用户界面的基本单元。组件可以是函数组件或类组件它们封装了特定部分的UI和逻辑使得代码更具可复用性和可维护性。
2、React组件
React组件可以通过函数或类来定义。函数组件是无状态的接收一些属性props并返回渲染的UI。类组件有自己的状态state和生命周期方法可以处理更复杂的逻辑。
// 函数组件
const FunctionalComponent (props) {return div{props.message}/div;
};// 类组件
class ClassComponent extends React.Component {render() {return div{this.props.message}/div;}
}无论是函数组件还是类组件它们都可以被其他组件引用和嵌套从而构建出整个React应用的UI。
七、useState的使用
1、useState基础使用
在函数组件中使用useState来声明状态。useState返回一个包含当前状态和更新状态的函数的数组。基础使用如下
import React, { useState } from react;const Counter () {const [count, setCount] useState(0);const increment () {setCount(count 1);};return (divpCount: {count}/pbutton onClick{increment}Increment/button/div);
};八、修改状态的规则
1、状态不可变
在React中状态是不可变的直接修改状态是不被允许的。因此我们应该使用更新状态的函数形式确保每次更新都是基于当前状态的
// 错误的方式
// count直接被修改
// setCount(count 1);// 正确的方式
// 使用回调函数确保基于当前状态更新
setCount((prevCount) prevCount 1);2、修改对象状态
当状态是对象时修改其中的某个属性时需要保留原有对象的其他属性。可以使用展开运算符spread operator来实现
const [user, setUser] useState({ name: John, age: 25 });// 错误的方式
// 直接修改对象属性会导致其他属性丢失
// setUser({ age: 26 });// 正确的方式
// 使用展开运算符确保其他属性不变
setUser((prevUser) ({ ...prevUser, age: 26 }));九、组件的样式处理
1、组件基础样式方案
在React中有多种处理组件样式的方式其中一种是使用内联样式。可以通过style属性将样式对象传递给组件
const MyComponent () {const componentStyle {color: blue,fontSize: 16px,};return (div style{componentStyle}This is my component./div);
};除了内联样式还可以使用CSS模块、styled-components等方式来管理和应用组件的样式。
十、受控表单绑定
1、受控表单绑定
在React中受控表单是指表单元素的值受React组件的状态控制。通过使用value属性和onChange事件可以实现受控表单的绑定
const ControlledForm () {const [inputValue, setInputValue] useState();const handleChange (event) {setInputValue(event.target.value);};return (formlabelInput:input typetext value{inputValue} onChange{handleChange} //label/form);
};十一、React中获取DOM
1、React中获取DOM
在React中获取DOM通常使用ref通过ref可以引用组件或DOM元素。使用useRef来创建ref对象然后将其传递给需要引用的组件或DOM元素
import React, { useRef, useEffect } from react;const MyComponent () {const myRef useRef(null);useEffect(() {// 可以在这里通过myRef.current获取DOM元素console.log(Ref value:, myRef.current);}, []);return div ref{myRef}This is my component./div;
};通过ref可以在React中访问和操作DOM元素但在大多数情况下推荐使用React的状态和属性来管理组件状态和交互。
十二、组件通信
1、理解组件通信
在React中组件通信是指组件之间如何传递数据和交流。组件通信是React应用中非常重要的一部分它可以分为父子组件通信、兄弟组件通信以及跨层级组件通信等多种形式。 2、父传子-基础实现
父传子组件通信是最常见的一种方式通过将数据通过props传递给子组件
// ParentComponent.jsx
import React from react;
import ChildComponent from ./ChildComponent;const ParentComponent () {const message Hello from parent!;return ChildComponent message{message} /;
};// ChildComponent.jsx
import React from react;const ChildComponent (props) {return div{props.message}/div;
};3、父传子-props说明
通过props传递数据时可以传递任何JavaScript类型的数据包括字符串、数字、对象等。子组件通过props接收父组件传递的数据。
4、父传子 - 特殊的prop children
除了直接传递props外React还提供了一个特殊的props即children。通过children可以将父组件中的子组件传递给子组件
// ParentComponent.jsx
import React from react;
import ChildComponent from ./ChildComponent;const ParentComponent () {return ChildComponentChild content/ChildComponent;
};// ChildComponent.jsx
import React from react;const ChildComponent (props) {return div{props.children}/div;
};5、父子组件通信-子传父
子组件向父组件通信通常需要通过回调函数的方式将子组件中的数据传递给父组件
// ParentComponent.jsx
import React from react;
import ChildComponent from ./ChildComponent;const ParentComponent () {const handleChildData (dataFromChild) {console.log(Data from child:, dataFromChild);};return ChildComponent sendDataToParent{handleChildData} /;
};// ChildComponent.jsx
import React from react;const ChildComponent (props) {const sendData () {props.sendDataToParent(Hello from child!);};return button onClick{sendData}Send Data/button;
};6、使用状态提升实现兄弟组件通信
兄弟组件通信通常需要将共享状态提升到它们的共同父组件中然后通过props传递给兄弟组件
// ParentComponent.jsx
import React, { useState } from react;
import BrotherComponentA from ./BrotherComponentA;
import BrotherComponentB from ./BrotherComponentB;const ParentComponent () {const [sharedState, setSharedState] useState(Shared State);return (divBrotherComponentA sharedState{sharedState} /BrotherComponentB sharedState{sharedState} //div);
};// BrotherComponentA.jsx
import React from react;const BrotherComponentA (props) {return divComponent A: {props.sharedState}/div;
};// BrotherComponentB.jsx
import React from react;const BrotherComponentB (props) {return divComponent B: {props.sharedState}/div;
};7、使用Context机制跨层级组件通信
React提供了Context机制可以在组件树中传递数据而不必一级一级手动传递。通过createContext创建一个Context然后使用Provider在组件树中提供数据使用Consumer或useContext在组件中获取数据。
// MyContext.js
import { createContext } from react;const MyContext createContext();export default MyContext;// ParentComponent.jsx
import React from react;
import MyContext from ./MyContext;
import ChildComponent from ./ChildComponent;const ParentComponent () {return (MyContext.Provider valueHello from Context!ChildComponent //MyContext.Provider);
};// ChildComponent.jsx
import React, { useContext } from react;
import MyContext from ./MyContext;const ChildComponent () {const contextData useContext(MyContext);return div{contextData}/div;
};使用Context可以在组件树的任意层级传递数据避免了手动逐层传递props的繁琐过程。
十三、useEffect 的使用
1、useEffect 的概念理解
useEffect是React提供的一个Hook用于处理副作用操作。副作用指的是在组件渲染过程中可能会引起状态变化、DOM操作、网络请求等与组件状态无关的操作。useEffect的作用类似于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount生命周期方法的结合体。
2、useEffect 的基础使用
import React, { useEffect } from react;const MyComponent () {useEffect(() {// 副作用操作比如数据获取、DOM操作等console.log(Component did mount or update);// 返回清除函数可选return () {console.log(Component will unmount);};}, []); // 依赖项为空数组表示仅在组件挂载和卸载时执行return divMy Component/div;
};3、useEffect 依赖项参数说明
useEffect的第二个参数是一个依赖项数组表示在数组中指定的依赖发生变化时才会重新运行副作用操作。如果依赖项为空数组则只在组件挂载和卸载时执行副作用操作。有助于避免不必要的重复执行。
useEffect(() {// 副作用操作
}, [dependency1, dependency2]);4、useEffect — 清除副作用
在useEffect中可以返回一个清除函数。这个函数在组件卸载时执行用于清理副作用操作比如取消订阅、清除定时器等。
useEffect(() {// 副作用操作// 返回清除函数return () {// 清理副作用操作比如取消订阅、清除定时器等};
}, [dependency1, dependency2]);清除函数不仅在组件卸载时执行还会在下一次副作用操作执行之前执行以确保之前的副作用得到正确清理。
十四、自定义Hook实现
1、自定义Hook函数
自定义Hook是一种用于复用状态逻辑的方式。它是一个函数名称以“use”开头可以在其内部使用其他React Hook。自定义Hook让我们能够将组件逻辑提取到可重用的函数中。
import { useState, useEffect } from react;const useCustomHook (initialValue) {const [value, setValue] useState(initialValue);useEffect(() {// 副作用操作可以使用value等状态console.log(Custom Hook effect);}, [value]);const increment () {setValue(value 1);};const decrement () {setValue(value - 1);};return {value,increment,decrement,};
};export default useCustomHook;使用自定义Hook
import React from react;
import useCustomHook from ./useCustomHook;const MyComponent () {const { value, increment, decrement } useCustomHook(0);return (divpValue: {value}/pbutton onClick{increment}Increment/buttonbutton onClick{decrement}Decrement/button/div);
};十五、React Hooks使用规则
1、React Hooks使用规则
在使用React Hooks时有一些基本的规则需要遵循 只能在函数组件或自定义Hook中使用Hooks Hooks只能在函数组件、自定义Hook中调用不可在类组件中使用。 Hook的调用顺序必须保持一致 在同一个组件中Hook的调用顺序必须保持一致。这样React能够正确地将内部的state和变量与对应的Hook关联起来。 只能在最顶层使用Hook 不要在循环、条件语句或嵌套函数中调用Hook。确保它们在每次渲染中都是以相同的顺序调用的。 自定义Hook以“use”开头 为了清晰明了自定义Hook函数的名称应该以“use”开头这也是React官方的约定。 每个自定义Hook都是独立的 每个自定义Hook都应该是独立的不应该依赖其他自定义Hook。这样可以确保每个Hook都是相互独立的逻辑单元。
遵循这些规则能够使Hooks在React组件中正确地工作确保代码的可维护性和清晰性。
小结
本篇博客深入探讨了React的基础概念和高级特性着重介绍了React中常用的技术要点。首先我们从React的基本介绍开始了解了它的核心思想——组件化以及为什么React在构建用户界面方面如此受欢迎。
随后我们学习了如何搭建React开发环境使用create-react-app快速创建一个现代化的React应用。在进入具体的技术细节之前我们详细讨论了JSX的概念和本质以及在实际开发中的高频应用场景如JSX中使用JS表达式、列表渲染和条件渲染等。
接着我们深入了解了React中的事件绑定和组件的基本概念。我们学习了如何在React中使用useState来管理组件的状态以及修改状态的规则包括状态的不可变性和修改对象状态的技巧。对组件的样式处理、受控表单绑定、组件通信等主题也进行了详细的讲解。
随后我们介绍了useEffect的使用它在React中负责处理副作用操作。我们深入了解了useEffect的基本使用、依赖项参数的说明以及清除副作用的方式确保我们在组件生命周期中能够正确处理异步操作、订阅和取消订阅等场景。
在自定义Hook的部分我们学会了如何抽象出可复用的逻辑单元并且按照React官方的约定为自定义Hook添加了“use”前缀。最后我们总结了使用React Hooks的基本规则以确保Hooks能够正确工作且代码清晰易读。
通过这篇博客读者不仅能够掌握React的基础知识还能深入了解React的高级特性和开发技巧为构建更加灵活、可维护的React应用提供了有力的支持。希望本篇博客能够成为读者学习React的有益指南。
