ReactJS React 或 ReactJS 最初由 Facebook 开发，它充当 Web 和移动应用程序的视图层。它与 Node js 环境很好地集成。以下是 React 的主要功能。可扩展性 - react 是一个高度适应性和可扩展的库。功能丰富 - 为现有的 javascript 和 typescript 语言提供扩展。可重用性 - react 组件是高度可重用的。Vue.js Vue.js 是基于 javascript 的 MVC 框架，非常有助于创建响应式 UI。以下是 Vue.js 的主要功能。可扩展性 - Vue.js 是一个高度适应性和可扩展的库。功能丰富 - 为现有的 html 组件提供扩展。可重用性 - Vue.js 组件是高度可重用... 阅读更多

JSX 最终使用 createElement 方法创建 React 元素。示例 Submit 将转换为 -React.createElement(    FormButton,    {color: 'green', buttonSize: 10},    'Submit’ )自闭合标签也可以添加。大写自定义 React 元素自定义 react 元素必须以大写字符开头命名，以便 React 区分 html 元素和 react 元素。由于 Jsx 被转换为 React.createElement，因此 React 库必须在范围内。为此，如果 jsx 需要使用，我们必须导入 React。使用点运算符访问内部属性元素的内部属性... 阅读更多

高阶组件简称为 hoc。它是一种模式，接收一个组件并返回一个新的组件，并为其添加附加功能。//hoc 是自定义 JavaScript 函数的名称const AddOnComponent= hoc(SimpleComponent);我们使用具有状态和/或道具的组件来构建 UI。类似地，hoc 从提供的组件构建一个新组件。hoc 的用途是在 React 中进行横切关注点。组件将负责单个任务的单个责任，而 hoc 函数将负责横切关注点。来自 redux 的 Connect 函数是 hoc 的一个示例。hoc 的一个实际示例Display... 阅读更多

大多数时候，我们需要从组件中返回多个元素。React 片段有助于返回多个元素。另一种选择是使用 div 等 html 元素来包装它们。但是使用额外的 html 节点可能会导致一些语义问题。React.Fragment 的示例render() {    return (                                  ); }简写语法为：render() {    return (                                 ... 阅读更多

将 ref 传递给子组件称为转发 ref。React 提供了一个 createRef 函数来为元素创建 ref。forwardRef 是一个将 ref 传递给子组件的函数。示例// ExampleRef.js const ExampleTextInput = React.forwardRef((props, ref) => (     )); const exampleInputRef = React.createRef(); class NewTextInput extends React.Component {    handleFormSubmit = e => {       e.preventDefault();       console.log(“Entered value: ”+exampleInputRef.current.value);    };    render() {       return (                       this.handleFormSubmit(e)}>                 ... 阅读更多

React 上下文 api 在 16.3 或更高版本中安全用于生产环境。添加上下文 api 的原因是，如果存在子组件链，则避免传递 props。在不使用上下文 api 的情况下，我们必须通过所有中间组件传递 props。另一种解决方案是使用 Redux 等第三方库来维护中央存储。了解传递 props 问题App.js → books 的 props → BookList.js → 再次传递 books 作为 props → Book.js随着子组件数量的增加，链... 阅读更多

构建工作流程有助于执行以下操作优化代码使用下一代 JavaScript (ES6)这是单页/多页应用程序的标准方法高效的方法使用 NPM 或 Yarn 轻松集成依赖项使用像 web-pack 这样的捆绑器来更轻松地模块化代码和交付代码像 Babel 这样的预编译器我们可以使用本地开发服务器来测试应用程序构建工作流程看起来很复杂，但 React 社区使用单个命令 create-react-app 使其变得简单。要使用 create-react-app，我们需要在我们的机器上安装 node js。您可以使用以下命令在终端上检查 node 是否已安装-node –version如果尚未安装，请安装最新... 阅读更多

Hooks 允许 React 中的函数组件获得基于类的组件中可用的功能，使它们更强大。useState 我们将从 react 中导入。导入 {useState} from 'react'；这有助于我们为函数组件创建本地状态变量，并提供更新该变量的方法。类中的状态是一个对象，但使用 useState，我们可以创建简单的原始数据类型，如果需要，还可以创建对象。const test=()=>{    const [age, setAge] = useState(25);    return (                年龄：{age}          setAge(age+1)}>增加年龄          ); ... 阅读更多

React hook useEffect 有助于在 React 的函数组件中添加 componentDidUpdate 和 componentDidMount 组合生命周期。到目前为止，我们知道我们只能在有状态组件中添加生命周期方法。要使用它，我们需要从 react 中导入它-导入 React, {useEffect} from 'react'；const tutorials=(props)=>{    useEffect( ()=>{       console.log('hello')；       setTimeout( ()=>{ alert('hello')； }, 2000)；    })； }如果我们运行它，我们将在每个渲染周期中看到控制台日志和警报。在这里，我们也可以在 useEffect 内部调用 http 请求。现在这类似于有状态组件的 componentDidUpdate 生命周期。我们可以... 阅读更多

useContext 钩子允许将数据传递给子元素，而无需使用 Redux。useContext 是 React 中的命名导出，因此我们可以在函数组件中像下面这样导入它 - import {useContext} from ‘react’;如果我们只需要将数据传递给子元素，它就是 Redux 的一个简单替代方案。创建一个上下文环境的简单示例import React, { createContext } from ‘react’; import ReactDOM from ‘react-dom’; const MessageContext = createContext(); myApp=()=>{    return (                                                ); }在子组件 Test 中，我们可以... 阅读更多