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);我们使用具有状态和/或 props 的组件来构建 UI。类似地，hoc 从提供的组件构建一个新组件。hoc 的用途是在 React 中进行横切关注点。组件将负责单个任务的单独职责，而 hoc 函数将负责横切关注点。redux 中的 Connect 函数就是 hoc 的一个例子。hoc 的一个实际示例显示... 阅读更多

大多数情况下，我们需要从组件中返回多个元素。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 Context API 在 16.3 或更高版本中安全用于生产环境。添加 Context API 的原因是为了避免在存在一系列子组件时传递 props。如果不使用 Context 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 hook 允许在不使用 redux 的情况下将数据传递给子元素。useContext 是 react 中的命名导出，因此我们可以在功能组件中像下面这样导入-导入 {useContext} from ‘react’;如果我们只需要将数据传递给子元素，它就是 Redux 的一个简单替代方案。创建上下文的简单示例导入 React, { createContext } from ‘react’; 导入 ReactDOM from ‘react-dom’; const MessageContext = createContext(); myApp=()=>{    return (                                                ); }在子组件 Test 中，我们可以... 阅读更多

使用 Proptypes 可以确保组件接收 Props 的类型安全，也有助于进行正确的计算。例如 - 如果我们接收 name 作为字符串，age 作为数字，那么它们应该以相同的类型接收。如果我们接收 age 为字符串，则可能导致计算错误。要使用 Proptypes，我们必须安装以下包。npm install –save prop-types这个包由 React 团队提供。要在组件上使用它，我们首先需要导入它import PropType from ‘prop-types’;我们可以在任何类型的组件（有状态或无状态）上使用它。在组件导出前，... 阅读更多