React基础(1)-create-react-app

如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词

尽管三者实现业务最终的目的都能达成一致,但是各有特色,其中任何一框架,个人觉得,都博大精深,可圈可点,要学习的内容有很多,我也仅仅是浅尝辄止而已.

有时候,因为工作项目的需要,自己在切换各个技术栈的时候,只要一段时间没有用,就有些陌生,说到底不得不承认自己功力不够

本文并不是什么教程,只是作为自己学习过程中的一些总结和思考,一起学习,共同成长~

React是什么?

用于构建用户界面的javascript库,MVC架构中的V层

• 声明式编程(想要实现什么目的,应该做什么,但是不指定具体怎么做,如下代码所示)

面向数据编程,只要把数据构建好了就可以了的,react会自动的帮你去构建网站,把数据可以理解为图纸,图纸做好了之后,React会自动的结合这张图纸帮助你去构建这个大厦,去构建整个页面的DOM

数据是什么,页面就显示什么,这种声明式的开发帮助我们节约掉大量的DOM操作,这是React编程带来的一个优势)

/**
*
* 需求:编写一个函数，处理传入包含大写字符串的数组，返回包含相同小写字符串的数组
* 声明式编程实现toLowerCase
* 输入数组的元素传递给map函数，然后返回包含小写值的新数组
*/

let toLowerCase = arr => arr.map(function(item) {
return item.toLowerCase();
})

let aToCasesA = ['SUIBICHUANJI','ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
let aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]

• 命令式编程(类似jQuery操作DOM,创建一个页面,你要一点点的告诉DOM怎么去挂载,要怎么去做,JQ,原生也好都是命令式编程，都是在做DOM操作,获取元素,绑定元素,执行操作)

/*
* 命令式编程:按照顺序一步一步的实现
* 首先，创建一个空数组用于保存结果，然后遍历输入数组的所有元素，
将每项元素的小写值存入空数组中，然后返回结果数组
*/


var aToCasesA = ['SUIBICHUANJI', 'ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
function toLowerCase(arr) {
var res = [];
for(var i = 0; i < arr.length; i++) {
res.push(arr[i].toLowerCase());
}
return res;
}
var aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]

• 函数式编程:写的都是一些函数，带来的好处,是维护起来比较容易,当一个函数比较大的时候,可以进行拆分，每一个函数各司其职,便于前端自动化测试(数组中的一些map,reduce,find等方法的应用就是函数式编程)
• 视图层框架(在大型项目中,光用React是不行的,还得配合一些数据层的框架帮助我们解决一些组件之间的父子组件传值的问题,React把自己定义成一个视图层的框架,并不是什么问题都能解决,只是帮助你解决数据和页面渲染的问题，至于组件之间怎么传值，交给其他组件来做.

在小型项目中,可以借助React中的父子组件传值就可以,但是在大型项目里,单单来使用React是不够的,比如说:flux，redux,mobox这样的数据层框架),React并不是一个完整的框架,所以它学习的成本也就相对高些的.