React 已经存在超过 5 年了。正如 SPEC INDIA 在这篇 Medium 文章中所述，大多数公司和大品牌，例如 Facebook（其创建者）、Instagram、Twitter、Netflix、WhatsApp、Dropbox 等，都在他们现有的项目中使用这个 UI 库。
在深入学习 React 的过程中，我接触到了一些 React 生态系统中常用但鲜为人知的术语。它们是什么？我们又该如何使用它们呢？本文将简要介绍 20 个鲜为人知的 React 特性。
我刚开始接触这些库的时候，确实很困惑。
元素描述了您希望在网页上看到的内容。它们只是以 DOM 节点形式出现在 Web 应用程序中的普通对象。
例子：
const element = <h1>Hello, world</h1>; // THIS IS AN ELEMENT
ReactDOM.render(element, document.getElementById('root'));
组件从根本上来说是一个 JavaScript 函数，它接受称为props 的输入并返回元素。
例子：
const LoginButton = ({ onLogin }) =>
<div id={'login-btn'} onClick={onLogin}>Login</div>
元素是构成组件的“组成部分”。
SyntheticEvent？（Doc 📃）^_~当你使用事件处理时，所有处理逻辑都是通过 SyntheticEvent 实例传递的，它就像是对浏览器原生事件的封装。在内部，它是React 事件系统的一部分。
例子：
键（key）是一种特殊的字符串属性，建议在创建元素数组时使用。这样 React 就能识别出哪个元素发生了变化、被添加或被删除。键赋予数组中的每个元素独特的标识。
例子：
const ItemList = item.map((item) =>
<li key={item.id}>
{item.title}
</li>
)
ref是一个用于返回元素引用的属性。至于为什么要使用它们，我想大多数人都不用🌝。当然，当你需要直接访问 DOM 元素或组件实例时，它们可能有用。尽量避免使用 ref，并用状态提升来替代。
例子：
// Reference: https://css-tricks.com/working-with-refs-in-react/#article-header-id-1
class Example extends React.Component {
constructor(props) {
super(props)
// Create the ref
this.exampleRef = React.createRef()
}
render() {
return (
<div>
// Call the ref with the `ref` attribute
<input type="text" ref={this.exampleRef} />
</div>
)
}
}
findDOMNode()？首先，两者之间的区别是：
这样可以更好地控制何时设置和取消设置引用。这里我们传递的是一个函数，而不是属性。该函数接收 React 组件实例或 HTML DOM 元素作为参数，该参数可以在应用程序的其他地方使用。
例子：
// Reference: https://css-tricks.com/working-with-refs-in-react/#article-header-id-2
<input type="text" ref={element => this.textInput = element} />
findDOMNode()（Doc📃）这种方法适用于读取 DOM 中的值，例如输入字段的值。它也常用于测量 DOM 性能。
例子：
ReactDOM.findDOMNode(component);
文档中（粗体部分）写道：
大多数情况下，您可以将 ref 附加到 DOM 节点，
findDOMNode完全避免使用 `<div>`。`findDOMNode<div>` 是一个用于访问底层 DOM 节点的“逃生舱”。大多数情况下，不建议使用此“逃生舱”，因为它会破坏组件的抽象层。它在严格模式下已被弃用。
GitHub 代码库中有详细的说明：
acdlite / react-fiber-architectureReact Fiber是对React核心算法的持续重构，是React团队两年多研究的结晶。
React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。其核心特性是增量渲染：能够将渲染工作拆分成多个块，并在多个帧上进行渲染。
其他主要功能包括：能够在有新更新时暂停、中止或重用工作；能够为不同类型的更新分配优先级；以及新的并发原语。
Fiber 引入了一些新颖的概念，这些概念仅靠代码很难理解。这份文档最初是我在 React 项目中实践 Fiber 时所做的笔记。随着内容的不断完善，我意识到它或许能为其他人提供一些帮助……
这是一个用于控制表单内输入元素的组件，它会根据用户连续的输入内容进行操作。这意味着每次状态改变都会有相应的处理函数。
例子：
handleChange(event) {
this.setState({value: event.target.value.toLowerCase()})
}
这类组件会在内部存储自身的状态。在输入表单字段中，更新信息无需 React 干预即可反映出来。但缺点是，你无法强制该字段具有特定值。
例子：
class UserProfile extends React.Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
this.input = React.createRef()
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
{'Name:'}
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
createElement8.和有什么区别cloneElement？ ^_+createElement（Doc📃）你编写的所有 JSX 代码都会被转换成使用这个 React 方法。它会创建一个新的、指定类型的 React 元素并返回该元素。
例子：
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
cloneElement（Doc📃）它的作用很简单，就是克隆并返回一个新元素。它类似于以下 JSX 代码：
<element.type {...element.props} {...props}>{children}</element.type>
例子：
// Reference: https://www.educative.io/edpresso/what-is-the-react-cloneelement-function
class ParentComp extends React.Component {
render() {
// The new prop to the added.
let newProp = 'red';
// Looping over the parent's entire children,
// cloning each child, adding a new prop.
return (
<div>
{React.Children.map(this.props.children,
child => {
return React.cloneElement(child,
{newProp}, null);
})}
</div>
)
}
}
// The child component
class MyButton extends React.Component {
render() {
return <button style =
{{ color: this.props.newProp }}>
Hello World!</button>
}
}
prop代理有助于添加或编辑传递给组件的props。
例子：
function HOC(WrappedComponent) {
return class Test extends Component {
render() {
const newProps = {
title: 'New Header',
footer: false,
showFeatureX: false,
showFeatureY: true
};
return <WrappedComponent {...this.props} {...newProps} />
}
}
}
上下文是一种在应用程序组件树中传递数据的方法。它的作用是避免在应用程序的每个层级手动传递数据。文档中有一个专门的页面介绍上下文，内容涵盖何时使用以及它的一些缺点。
例子：
const {Provider, Consumer} = React.createContext(defaultValue);
假设组件的状态发生了变化，React 在后台会将新返回的元素与之前渲染的元素进行比较。如果它们不相等，则会更新 DOM。整个过程称为协调（reconciliation）。
这是一种将子元素渲染到应用程序中父组件 DOM 层次结构之外的 DOM 节点的方法。
例子：
// Reference: https://blog.logrocket.com/learn-react-portals-by-example/
import { useEffect } from "react";
import { createPortal } from "react-dom";
const Portal = ({children}) => {
const mount = document.getElementById("portal-root");
const el = document.createElement("div");
useEffect(() => {
mount.appendChild(el);
return () => mount.removeChild(el);
}, [el, mount]);
return createPortal(children, el)
};
export default Portal;
该对象通常在 Node 服务器上使用，它允许您将组件渲染为静态标记以进行服务器端渲染 (SSR)。
例子：
// Using Express
import { renderToString } from 'react-dom/server'
import MyPage from './MyPage'
app.get('/', (req, res) => {
res.write('<!DOCTYPE html><html><head><title>My Page</title></head><body>')
res.write('<div id="content">')
res.write(renderToString(<MyPage/>))
res.write('</div></body></html>')
res.end()
})
装饰器以更灵活、更易读的方式修改组件的功能。以下示例展示了如何在 React 中使用类装饰器，您可以在这篇 Medium 文章中了解其背后的原理：
例子：
中等的
@setTitle('Profile')
class Profile extends React.Component {
//....
}
const setTitle = (title) => (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
document.title = title
}
render() {
return <WrappedComponent {...this.props} />
}
}
}
服务器端渲染在服务器端渲染 React 组件。输出是 HTML 内容。您可以使用[ReactDOMServer.](https://reactjs.org/docs/react-dom-server.html)
它会将常规 HTML 输出为字符串，然后可以将其作为服务器响应的一部分放置在页面主体中。在客户端，React 会检测到预渲染的内容，并无缝地从中断处继续渲染。请参阅这篇文章，了解如何在 React 中实现 SSR。
例子：
import ReactDOMServer from 'react-dom/server'
import App from './App'
ReactDOMServer.renderToString(<App />)
这是一个用于检测应用程序中潜在问题的组件。它不会渲染任何 DOM 元素，但会对子元素激活检查和警告。
需要注意的是，这些检查仅在开发模式下运行，不会影响生产版本。
例子：
import React from 'react'
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
// Strict mode applies to the following two components only
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer />
</div>
)
}
如果想将功能相同的组件分离出来，可以使用 mixin。但根据文档，mixin 并不推荐使用，可以用高阶组件 (HOC) 代替。
例子：
const PureRenderMixin = require('react-addons-pure-render-mixin')
const Button = React.createClass({
mixins: [PureRenderMixin],
// ...
})
如果你想将对象数组传递给具有特定形状的组件，你可以使用 ` React.PropTypes.shape()shape` 作为参数React.PropTypes.arrayOf()。更多信息请参阅以下 Stack Overflow 帖子：
是否有内置的方法可以使用 proptypes 来确保传递给组件的对象数组实际上是特定形状的对象数组？
或许像这样？
annotationRanges: PropTypes.array(PropTypes.shape({
start: PropTypes.number.isRequired,
end: PropTypes.number.isRequired,
})),
我是不是漏掉了什么显而易见的东西？感觉好像……
https中使用？ :]打开package.json文件，并将相应部分修改scripts为：
"scripts": {
"start": "set HTTPS=true && react-scripts start"
}
React 有一个名为 `React version` 的方法React.version，您可以将其添加为常量并在任何地方使用它来显示运行时正在使用的 React 版本。
例子：
const REACT_VERSION = React.version
ReactDOM.render(
<div>{`React version: ${REACT_VERSION}`}</div>,
document.getElementById('app')
)
希望我解释清楚了。你之前了解过它们吗？说实话，我以前从来不知道 React 里的 mixin 是什么！
代码出错了？快来看看Visual Studio文档里的调试功能：https:
— Microsoft Developer UK (@msdevUK) 2020年4月8日
//t.co/nvE0ygt7fF 图片来源：https://t.co/NsWs0PcXio #开发者幽默 #调试 #程序员 pic.twitter.com/nEbczhhwdm