004. 声明式编程

主要的编程范式有:

  • 命令式编程
  • 声明式编程
  • 函数式编程
  • 面向对象编程
  • ......

React的编程思想是:声明式编程

这几种之间的区别

命令式编程

描述代码如何工作,告诉计算机一步一步的执行,先做什么后做什么。
比如:去酒吧点一杯酒,要这样指挥服务员:
1、从架子上取下一个玻璃杯;
2、把杯子放在酒桶前;
3、打开酒桶开关,直到酒杯满;
4、把杯子递给顾客;

这就是按照声明式方式点酒,需要告诉服务员如何给顾客提供一杯酒。

这里有一个代码示例,编写一个函数,处理传入包含大写字符串的数组,返回包含相同小写字符串的数组。

toLowerCase(['FOO', 'BAR']); // ['foo', 'bar']\

命令式函数实现

const toLowerCase = arr => {
    const res = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        res.push(arr[i].toLowerCase());
    }
    return res;
}

首先,创建一个空数组用于保存结果,然后遍历输入数组的所有元素,将每项元素的小写值存入空数组中,然后返回结果数组;

声明式编程

声明式编程表明想要实现什么目的,应该做什么,但是不指定具体怎么做

比如声明式点一杯酒,只需要告诉服务员:我要一杯酒。
声明式编程实现toLowerCase:

const toLowerCase = arr => arr.map(
    value => value.toLowerCase();
)

输入数组的元素传递给map函数,然后返回包含小写值的新数组

命令式编程和声明式编程的对比:

  • 声明式更加简洁易懂,有利于大型项目代码的维护;
  • 无需使用变量,避免了创建和修改状态;

关于React

在React中,完全不需要用户来操作DOM,我们也可以认为React中没有DOM,只有Component。

当写好一个Component,这个Component会负责UI,用户不能够去指挥Component怎么显示。

隔离DOM不仅是因为操作DOM很慢,也是为了把界面和业务完全隔离。

参考

https://segmentfault.com/a/1190000015924762
感谢参考文章作者!

猜你喜欢

转载自blog.csdn.net/weixin_34388207/article/details/87770418