抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

创建项目 使用 vite 创建Vue3项目 如果你使用过Webpack,你会发现,在启动开发服务器的时候,会将整个项目编译一遍。当项目的规模越来越大时,这样的编译过程往往十分耗时,光启动开发服务器就要几分钟。如果你修改了文件,可能修改在几秒后才会显示出来。 这极大的影响了开发体验。而且目前,主流的浏览器都已经支持 ES6 模块了。因此,在开发环境下,我们可以直接把模块编译成浏览器支持的E...

介绍 在应用开发中,通常会存在一些全局性的内容,例如用户 id、主题、语言、以及各种 token。 要保证这些数据的传递,以传统的方式,通常有两种办法: 如果直接使用普通的对象,那么 React 就不会帮你自动更新 UI; 通过 props 的层层注入,需要修改大量的组件,且容易使得代码难以维护。 通过 上下文(Context) 就可以解决这些问题。 定义上下文 使用 React.c...

钩子是什么 在类组件中,我们可以定义 state 来管理组件的状态,使用生命周期函数来管理组件的生命周期。 但函数组件就没有这些功能。因此 React 16.8 推出了 钩子 (Hook),让函数组件也拥有了类似的功能。 函数组件默认情况下,是无法使用 state 和生命周期函数的。但 钩子 让用户有能力通过间接的方式,将 state 和 生命周期函数勾入函数组件中,让函数组件拥有了类似的...

组件进阶 高阶组件 前面提到的组件,都是将组件变成 UI, 而这里将会提到令一种类型的组件:高阶组件(HOC)。 高阶组件就是传入组件,返回组件的函数: 1const EnhancedComponent = higherOrderComponent(WrappedComponent); 高阶组件可以做很多事情: 抽取重复代码 条件渲染 捕获拦截生命周期 例如,我们可以使用高阶组件来监...

组件的状态 使用状态 要使用状态,需要: 函数组件 改成 类组件 。 定义构造函数(参数为 props),在构造函数中定义初始状态。 下面是一个例子: 1234567891011class Counter extends React.Component { constructor(props) { super(props) this.sta...

组件基础 定义组件 函数组件 只需要定义一个返回 React Dom 的函数,便可以定义组件。 1234function Hello(){ return <h1>hello, world!</h1>;} 函数组件有一个 props 参数用于传递数据: 1234function Hello(props){ return &...

JSX 进阶 列表渲染 所谓列表渲染,是指当写入 jsx 的数据是一个React DOM数组时,最终会生成一个列表。 这个例子生成一个简单的列表: 123456const arr = [1,2,3,4,5];const lists = arr.map(x => <li>{x}</li>);const el = (<ul>...

JSX 基础 介绍 1const element = <p>Hello, world!</p>; 这种看上去像 html 的东西便是 jsx。 一段 jsx 代码必须有一个根元素,也就是说,下面的代码是错的: 1const element = <p>Hello, world!</p><p>Hello, world!</p&...

开始 在浏览器上运行 React 应用 新建一个浏览器页面: index.html index.html12345678910111213141516<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <...