React初探

关于React，最近想花时间去了解学习，所以记录一些自己的学习内容。所有的内容只是自己的一些想法，不对的地方希望给与指正。 

 

1. React关注于视图层

因为之前学习过Angular，所以习惯Angualr的MVC的模式。Controller作为Model和View的中间层。接触React的时候，就感觉乱，没有明确的MVC结构的划分，Angular的时候，每一个组件偶都会有着几个单独的文件，css，js，html。react的时候，就直接一个js文件去处理所有的事情。

react中看到的第一句话就是React关注于视图层。说实话，不能深刻理解其意义。当时的问题是，关注视图层是想说明什么呢？我目前的答案是，不说明什么。关注视图层的原因在于视图是前端最终体现的根本，程序总是要曾现给用户的。然后由于前端也是有着重要的js存在。既然关注视图层，但是又要依赖js，那么这个视图层就不是简单的静态页面，而是一个具有js功能的view。

React 不仅专注于解决 View 层的问题，又是一个包括 View 和 Controller 的库。对于复杂的应用，可以根据应用场景自行选择业务层框架，并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。

 

2. React视图层是什么？

有了解react的指导React最重要的组件。这个组件也是我们上面关注的视图层。这样看来是React组件和Angular的组件很像，只不过是一个分开，一个放在了一起。但是不同点还是有的。

2.1 虚拟DOM

先聊一下虚拟DOM, DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实 DOM 树转换成 JavaScript对象树，也就是Virtual DOM，虚拟DOM运行在内存中。对于虚拟dom的详细知识以后再去看。

引出虚拟DOM是需要引入一个概念，React中的虚拟DOM是一个js对象，也就是说我们的组件也是一个js对象。这样看来就和Angular的组件不一样了。

2.2 JSX

上面看到React组件是一个js对象，但是组件的最终目的还是要曾现页面给用户，也就是这个js对象需要html内容，这也是jsx存在的意义。
React为方便View层组件化，承载了构建HTML结构化页面的职责。如下面的而例子，jsx语法可以在js中直接写入html内容。

function Welcome(props) {
    return <button className="btn btn-blue">
        <em>Confirm</em>
    </button>
}

class App extends Component {
    render() {
        return (
            <Welcome name="Sara" />
        );
    }
}

我们看一下当前React组件对应的js对象。

 

3. React组件

我们现在想一下React组件需要实现的功能。首先react是一个对象，需要可以实现html以及相应的js代码。而且一个application是多个组件一起构成的，那么React组件还需要实现组件嵌套过程中的数据交互。

React 组件基本上由 3 个部分组成——属性（props）、状态（state）以及生命周期方法。这里我们从一张图来简单概括 React，如图所示。

React 组件可以接收参数，也可能有自身状态。一旦接收到的参数或自身状态有所改变，React 组件就会执行相应的生命周期方法，最后渲染。整个过程完全符合传统组件所定义的组件职责。

React为什么是这样的结构，我们抛开react，就以原生js来想当前的对象。props是嵌套组件的数据交流。state是组件内部维护的私有变量，用于进行监控当前组件的变化。生命周期以及Render都是内部的方法，这里应该是借鉴web component的customer elements。Render用于渲染html，毕竟这是组件最终要呈现的内容。生命周期则是将组件的变化交给开发者控制。setState方法在我看来就是一种React对于state的保护机制，就好像我们创建对象内的私有变量使用方法去赋值。