React JS 的 10 个基本概念

如今，React.js 已经成为一个相当流行的 Web 开发框架。它拥有一些令人难以置信的特性，这些特性使它如此成功。在这里，我将介绍其中 10 个我认为有趣的特性—— 

虚拟DOM：

虚拟 DOM (VDOM) 是一种编程概念，其中 UI 的理想或“虚拟”表示保存在内存中，并通过 ReactDOM 等库与“真实” DOM 同步。

大多数 JavaScript 框架中的 DOM 操作都会响应任何更改，即使只是很小的更改，也会更新/重建整个 DOM。现代网站可能拥有大量数据，并且可能会使用大量的 DOM 操作。在这种情况下，该过程会变得非常低效。

虚拟 DOM 就像真实 DOM 的蓝图。React 会为每个 DOM 对象创建一个对应的虚拟 DOM 对象，作为 DOM 的表示。这样的 VDOM 拥有与真实 DOM 相同的属性，但无法直接更改屏幕显示元素。操作 DOM 可能很慢，但操作 VDOM 会更快，因为屏幕上没有任何内容。虽然 VDOM 更新也会更新所有 VDOM 对象，但如前所述，它仍然快得多。VDOM 更新后，React 会将更新后的 VDOM 与更新前的 VDOM 进行比较。这样，React 就能准确地知道哪些 VDOM 对象发生了更改，并且只会对实际 DOM 进行相应的更改以显示在屏幕上。

因此，React 仅更新 DOM 的所需部分，从而非常高效。

JSX ：

React 中的 JSX 是函数的语法版本React.createElement(component, props, ...children)。JSX 的代码格式如下：

const jsxElement = <h1 className= ”greeting”> Hello World ! </h1> 

这被称为 JSX，它是 JavaScript 的语法扩展。这段代码编译成React.createElements()调用，这样，

React.createElemet(
    ‘h1’,
    {className: ‘greeting’},
    ‘Hello World !’
)

这个函数反过来转换成一个对象，比如，

const jsxElement = {
    type: ‘h1’,
    props: { 
        className: ‘greeting’,
        children: ‘Hello World !’
    }
}

在 JSX 中嵌入表达式

有效的 JavaScript 表达式可以嵌入到 JSX 代码中，例如

const user = “Tom Cruise”
const jsxElement = <h1> Hello, {user} </h1>

反应元素：

元素是组件的基石。一个简单的元素示例如下：

const element = <h1>I am an Element</h1> 

渲染元素：

root DOM nodeReact 应用通常在 HTML 文件中只有一个，即<div id="root"></div>，React DOM 管理其中的所有内容。

为了在根 DOM 节点中渲染 React 元素，必须将 和 传递给ReactDOM.render()。

const element = <h1>I am an Element</h1> ;
ReactDOM.render(element, document.getElementById("root"));

成分：

组件是 JavaScript 函数，可以接受任意输入props并返回 UI 元素。它允许开发人员独立地处理应用程序的不同部分。

组件被定义为 JavaScript 函数，

function Greeting (props) {
    return <h1>Hello, {props.name}</h1>
} 

现在这个函数可以作为组件来调用<Greeting />。

类组件：

组件 a] 也可以定义为 ES6 类。函数组件和类组件具有相同的特性。

class Greeting extends React.Component {
    render () {
         <h1>Hello, {this.props.name}</h1>
        }
}

两种定义组件的方式都等同于 react。

组件渲染：

渲染组件与渲染元素相同。这里的元素代表定义的组件。

function Greeting (props) {
    return <h1>Hello, {props.name}</h1>
}

const element = <Greeting />;

ReactDOM.render(
    element,
    document.getElementById(“root”)
);

组件生命周期：

有许多组件生命周期方法可以在组件渲染（在 React 中称为“挂载”）或组件移除（在 React 中称为“卸载”）或 props 或状态改变（在 React 中称为“更新”）时调用。

常用的生命周期方法如下，

安装

当创建组件实例并将其插入 DOM 时，将按以下顺序调用这些方法。
constructor()
render()
componentDidMount()

更新

更新可能由 props 或 state 的变化引起。组件重新渲染时，这些方法按以下顺序调用。
render()
componentDidUpdate()

卸载

当组件从 DOM 中移除时，会调用此方法。
componentWillUnmount()

其他 API 和属性：

可以从组件调用另外两个 API，
setState()
forceUpdate()

属性分为两类，即类属性和实例属性。

类属性

defaultProps
displayName

实例属性

props
state

来源： VDOM、JSX、元素、组件和属性、状态和生命周期、默认属性