让我们看看如何创建一个简单的 React 函数式组件。组件是 React 库的构建块。组件有两种类型：有状态组件和无状态组件。有状态组件具有一个可以内部操作的本地状态对象。无状态组件没有本地状态对象，但我们可以使用 React hook 在其中添加一些状态。创建一个简单的 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-dom。在 Web 应用程序中，路由器有两种类型：BrowserRouter 和 HashRouter。这两种路由器类型的区别在于它们制定 URL 的方式。例如，http://hello.com/about => BrowserRouter 例如，http://hello.com/#/about => HashRouter（在其中使用哈希）BrowserRouter 更受欢迎，它使用 html5 history 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 的语义。示例 render(){    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 表单中，表单元素会在内部保留值，并在提交表单按钮提交时提交。示例表单示例           用户名：               在上面的示例中，我们有一个名为用户名的简单输入，我们可以在表单提交时接收它的值。html 表单的默认行为是导航到新页面，即提交表单后的页面。但是，如果我们有一个表单提交处理程序 JavaScript 函数，它可以验证表单数据作为... 阅读更多