响应式编程2 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

今日课程重点

• React语法详解
• React如何实现
• React的状态管理

课堂内容概要

几个问题

• react采用jsx，但是jsx并不符合js的相关标准

什么是jsx：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

• 返回的js发生改变时，如何更新dom
• state/props更新时，重新触发render函数

解决

采用虚拟DOM结点，其可以真正与真实的DOM结点同步，具有和DOM类似的树形关系。并且可以和真实DOM一一对应。

其赋予了React声明式API，React让UI是什么状态，就能确保DOM是什么状态。

因为其更新的次数少（仅最后更新真实DOM），因此计算速度快

React采用了O（n）时间复杂度的Diff算法，使得时间最优化，虽然Diff的结果不一定最优

状态管理

核心思想：将状态抽离到外部进行管理

常用React状态管理库：redux、xstate、mobx、recoil

通过状态机，很方便实现状态管理：

应用级框架科普

自己动手

REACT组件实操

部分内容源于菜鸟教程

封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

若需要向组件传递参数，需用 this.props 对象

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;

name 属性则是通过 props.name 获取的

当然，也可以进行多组件的复合应用

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="菜鸟教程" />
        <Url url="http://www.runoob.com" />
        <Nickname nickname="Runoob" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);