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的保护机制,就好像我们创建对象内的私有变量使用方法去赋值。

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页