react基础(react设计模式与最佳实践读书笔记001)

声明式编程

react如此强大的原因在于其声明式编程的使用。那么如何更加具体的阐释两者的区别呢?

我们以一个真实的伪代码场景来对比区别:

命令式编程:
- 从架子上拿一个酒杯
- 将被子放到酒杯前
- 按下酒桶开关,将杯子倒满
- 把杯子递给我

声明式编程:
- 请给我倒一杯啤酒

从上面的结果我们可以看出,声明式编程会更加容易操作,可维护,但是这也建立在一个前提下:就是需要服务员知道如何提供啤酒。

使用声明式编程时,开发人员只需要知道想要实现什么目的,无须列出实现效果的所有步骤。

声明式编程使得react很容易使用,因此最终的代码也很简单,这样产生的bug很少,可维护性增强。

react元素

react核心是使用元素这种特殊的对象来绘制ui流程,元素描述了屏幕上需要展示的内容,这些不可变对象比实现组件和组件实例要简单的多,而且只包含了展示界面锁需要的信息。

{
    type:Title,
    props:{
        color:'red',
        children:'hello world'
    }
}

其中很重要的一个特性是type,它告诉react如何处理元素本身,实际上如果type属性是字符串,就表示元素是dom节点;如果type属性是函数,那么元素就是组件。

dom元素和组件可互相嵌套,以表示整个渲染树。

比如下面的实例:

{
    type:Title,
    props:{
        color:'red',
        children:{
            type:'h1',
            props:{
                children:'hello,h1'
            }
        }
    }
}

特别的:当type为函数的时候,react会调用它,传入props来取回底层元素。然后react会一直对返回操作做相同的操作,直到取回完整的dom节点,这个过程称为一致性比较。

技术点分离与耦合 <=> 组件式开发

在过去的开发中,我们一直采用的方式都是按照技术点分离。比如把css\js\html分别放到不同的文件夹,但实际上css对应的选择器标签,js操作对应的dom对象以及样式都不能互相独立开,每一个的改动都会影响另外一个。这就导致了耦合。

而react则使用另外一种维度解决这个问题,它通过建议你编写名为组件的小型代码块来组织应用。

react的最终目标也是将创建组件所有相关的每个技术都封装起来,并根据他们的领域和功能进行关注点分离。

let style = {
    color:'white',
    backgroundImage:'url(q.png)'
};

ReactDOM.render(
  <div style={style}>Hello World</div> 
 );

常见误解:react一定要使用很多包、技术生态

其实作为开发一个最普通的react组件,只需要引入react核心库以及react-dom。

而对于其他的引入只是你需要对应的支持时才需要的按需引入,比如支持jsx语法,支持路由,支持转义等。

所以当你看到一个组件引入了很多包时,不用紧张,每个单独分析是用来支持什么功能的就好,大部分都不是react核心编码需要的。这个就和jq框架一样,引入库文件之后,你需要其他的样式文件, 插件文件都是可以的,这个和jq本身没有直接关系。

当然react官网提供了一个简单的脚手架,让我们可以快速的设置一些基本的模板,引入,它就是create-react-app.

发布者

Robinson Zhang

热爱前端,热爱分享,坚持高频写作,从小白到大师只是时间问题。