这是我参加[第五届青训营]伴学笔记创作活动的第六天

今日学习react框架

1.1 Reac是什么

• JavaScript的库，可以简化可视化界面的开发
• 基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写
• 核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。

1.4 React虚拟DOM React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。那么，什么是虚拟DOM呢？其实， 虚拟DOM这个概念很早就被提出来了， 是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上， 都是需要通过操作实际DOM来实现的。

于是， 问题也就自然出现了。对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。

React DOM类似于一种将相关的实际DOM组合在一起的集合， 是React的虚拟DOM对象，内置对象，将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM。

创建react组件

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { liked: false };
    }

    render() {
        if (this.state.liked) {
            return 'You liked this.';
        }

        return e(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            'Like'
        );
    }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

关于react核心概念

元素渲染： ReactDOM.render()是最顶层的渲染方法，而组件里面的render方法可以看成它的子成员，ReactDOM.render是唯一一个直接与DOM交互的方法，而其字render方法只改变ReactDOM元素，最终都是由ReactDOM.render来更替UI的DOM元素，所以此方法建议只调用一次。 条件渲染：React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符（包括三目运算符）去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。