让我们看看如何创建简单的 React 函数组件组件是 React 库的构建块。组件有两种类型。有状态组件无状态组件有状态组件具有可以内部操作的本地状态对象。无状态组件没有本地状态对象，但我们可以在其中使用 React hooks 添加一些状态。创建简单的 ES6 函数const player = () => { }这里我们对函数名使用了 const 关键字，这样它就不会意外地被修改。让我们添加一个带有某些 jsx 代码的 return 语句。const player = () => {    return (       我是 ... 阅读更多

React 路由的一些基础知识React-router 是主要库，而 react-router-dom 和 react-router-native 是特定于环境的库。React-router-dom 通常用于基于浏览器的 Web 应用程序。react-router-native 用于可以使用 react-native 开发的移动应用程序。要安装它，请使用命令 npm install –save react-router-domWeb 应用程序有两种类型的路由器。BrowserRouterHashRouter两种路由器类型之间的区别体现在它们构建 URL 的方式上。例如 http://hello.com/about => BrowserRouter例如 http://hello.com/#/about => HashRouter（在其中使用哈希）BrowserRouter 更受欢迎，它使用 html5 历史记录 API 来跟踪位置。HashRouter 支持遗留 ... 阅读更多

有多种方法可以将 bootstrap 添加到 react 项目中。使用 bootstrap CDN安装 bootstrap 依赖项使用 react bootstrap 包使用 bootstrap CDN这是添加 bootstrap 的最简单方法。像其他 CDN 一样，我们可以在 react 项目的 index.html 中添加 bootstrap CDN。下面是 react CDN url 之一如果我们需要 bootstrap 的 JavaScript 组件，那么我们应该在 index.html 中添加 jquery、popper.js这样，完整的 index.html 将如下所示：React App hello             添加 bootstrap 依赖项npm install bootstrap ... 阅读更多

我们使用 webpack 等工具捆绑 React 应用程序中的文件。最终的捆绑会根据导入文件的顺序合并文件并创建一个单个文件。这种方法的问题在于，随着文件数量的增加，捆绑文件也会变得更大。用户可能不会使用所有功能组件，但捆绑包仍在加载它们，这可能会影响应用程序的加载。为了避免这种情况，在 React 中使用了代码分割。示例捆绑示例：// app.js import { total } from './math.js'; console.log(total(10, 20)); // 42 // math.js export function total(a, b) {    return a ... 阅读更多

html 元素上的 aria-* 属性在 React.js 中也受支持。其他属性通常以驼峰式大小写编写，但这些 aria-* 以连字符大小写编写。有时如果我们在 React.js 中使用父 div，我们会破坏 html 的语义示例渲染(){    return(                测试          ); }如果与表格、列表等一起使用，div 会导致语义问题。为了避免这种情况，我们可以使用 React 提供的片段，如下所示：import React, { Fragment } from ‘react’; function MessageList({ message }) {    return (       ... 阅读更多

React 社区提供了一个关于如何以 React 方式思考并构建大型、快速且可扩展应用程序的方向。React 已触及多个平台，并被广泛用作流行的 JavaScript UI 界面库。步骤 1 - 创建一个简单的模拟服务如果我们需要进行服务器调用并获取数据。我们可以从创建一个模拟服务开始，并构建一个组件来获取和显示数据。在这里，我们可以包括组件中的 json 处理和评估预期结果。步骤 2 - 将功能分解成更小的组件React 最先建议的是创建 ... 阅读更多

组合和继承是在 React.js 中将多个组件一起使用的方法。这有助于代码重用。React 建议尽可能多地使用组合而不是继承，并且仅在非常特殊的情况下才应使用继承。理解它的示例：假设我们有一个输入用户名组件。继承class UserNameForm extends React.Component {    render() {       return (                                       );    } } ReactDOM.render(    < UserNameForm />,    document.getElementById('root'));这很简单，只需输入 ... 阅读更多

通常需要在不同的组件之间共享状态。在两个组件之间共享状态的常用方法是将状态移动到这两个组件的公共父级。这种方法在 React.js 中称为向上提升状态使用共享状态，状态的变化会同时反映在相关组件中。这是共享状态组件的单一事实来源。示例我们有一个包含 PlayerContent 和 PlayerDetails 组件的 App 组件。PlayerContent 显示播放器名称按钮。PlayerDetails 在一行中显示详细信息。App 组件包含两个组件的状态。选定的 ... 阅读更多

在受控组件表单中，React 组件通过为状态更新编写事件处理程序来处理数据。但在非受控组件中，表单数据由 DOM 本身处理。ref 用于从 DOM 接收表单值。示例class UserNameForm extends React.Component {    constructor(props) {       super(props);       this.handleFormSubmit = this.handleFormSubmit.bind(this);       this.inputUserName = React.createRef();    }    handleFormSubmit(event) {       console.log('username: ' + this.inputUserName.current.value);       event.preventDefault();    }    render() {       return (                           ... 阅读更多

在简单的 html 表单中，表单元素内部保留值并在表单提交按钮上提交。表单示例示例           用户名：               在上面的示例中，我们有一个名为 usernam 的简单输入，我们可以在表单提交时接收它的值。html 表单的默认行为是导航到新页面，即表单提交后的页面。但是，如果我们有一个表单提交处理程序 JavaScript 函数，它可以验证表单数据，则它可以提供更多优势 ... 阅读更多