【React高级】二、代码分割
摘要：大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载。 打包是个非常棒的技术，但随着你的应用增长
阅读全文
摘要：为什么我们需要无障碍辅助功能？ 网络无障碍辅助功能（Accessibility，也被称为 a11y，因为以 A 开头，以 Y 结尾，中间一共 11 个字母）是一种可以帮助所有人获得服务的设计和创造。无障碍辅助功能是使得辅助技术正确解读网页的必要条件。 React 对于创建可访问网站有着全面的支持，而
阅读全文
摘要：从设计稿开始 第一步：将设计好的 UI 划分为组件层级 首先，你需要在设计稿上用方框圈出每一个组件（包括它们的子组件），并且以合适的名称命名。如果你是和设计师一起完成此任务，那么他们可能已经做过类似的工作，所以请和他们进行交流！他们的 Photoshop 的图层名称可能最终就是你编写的 React
阅读全文
摘要：有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。 我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中： function FancyBorder(props
阅读全文
摘要：在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。 我们知道 props 是只读的。当属性只存在于组件的 state 中时，组件调用 this.setState() 便可修改它。然而，当属性是由父组件传入的
阅读全文
摘要：在 HTML 中，表单元素（如、 和 ）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。 我们可以把两者结合起来，使 React 的 sta
阅读全文
摘要：渲染多个组件 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); function Test(props) { const a = [1, 2, 3, 4, 5
阅读全文
摘要：根据条件返回组件 if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick}
阅读全文
摘要：React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 为了在回调中使用 th
阅读全文
摘要：1.通过以下五步将 Clock 的函数组件转成 class 组件： 创建一个同名的 ES6 class，并且继承于 React.Component。 添加一个空的 render() 方法。 将函数体移动到 render() 方法之中。 在 render() 方法中使用 this.props 替换 p
阅读全文
摘要：1.定义有效的React组件，有两种方式 1.1 通过函数形式 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 1.2 通过类形式 class Welcome extends React.Component { ren
阅读全文
摘要：与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。 React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。 React 元素是不可变对象。一旦被
阅读全文
摘要：我们可以通过使用命令npx create-react-app my-app来创建一个React项目 React的目录结构如下： 其中index.js是程序的入口 import React from 'react'; import ReactDOM from 'react-dom/client'; i
阅读全文
