react系列-01

React 1

react 作为当今前端最热的框架之一，虽然因BSD+专利许可协议事件再三成为话题焦点，但其不可否认的设计思想还是值得学习的。再者，凡封闭者必将自掘坟墓，即便以维护开源为理由也不能排除在外；facebook作为开源精神的一个践行者不会不明白这么浅显的道理，所以，copyRight最终还是会走向coprLeft.
上帝的归上帝，凯撒的归凯撒，程序猿能安心的写代码就好。
现在有很多构建React项目的脚手架工具，很多开发者也自己开发出各种构建工具，这里推荐两个：一个是facebook官方推荐的react-cli工具create-react-app create-react-app；另一个是淘宝基于AntDesign的dva-cli dva-cli;

1. what is React:

相对于angular来说，react更像是一个库而非框架，因为从控制反转的角度来说，使用angular开发的过程，我们需要遵循angular的各种规范，需要按照angular的解构设计去编写逻辑，组织代码；而使用react过程，我们可以采用任何其他方案来替代react的功能，当你的项目中已经引入react的前提下，你仍然可以根据自己/团队的喜好和技术栈来选择适合的开发组件，你可以去控制react,控制你所开发的项目。所以我更赞成称react为一个优秀的前端库，而非框架。这也再次印证了大家一致认为的react的学习成本和学习难度要低于angular,学习曲线也更加平滑。

2. why React?

让我们先抛弃所有的框架库概念，简单的从一个最简单的hello world例子来看一下,如何在你的项目中使用react:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React </title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script type="text/babel">
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.getElementById('container')
    )
    </script>
  </body>
</html>

1.仅仅需要两步即可写出一个react例子：

1.引入react依赖文件：①react.min.js--React的核心库文件；②react-dom.min.js--React封装/操作Dom的文件；③babel.min.js--将ES6代码转化为ES5代码的下一代javascript编译器；
2.构建react组件：ReactDOM.render(domElement,container);

2. 然后再深入看下react的优秀之处：

专注于View层，其他交给周边生态系统，给予开发者最大个性化便利；
采用虚拟DOM技术，避免了直接操作Dom元素，其性能自然不用过多优化即可有很好的用户界面体验；
其配合使用的优秀插件（react自身并不具有）flux采用单项数据流，页面状态更新逻辑更清晰轻量；

3. how to use React?

1. 可以从零开始一点一点构建整个项目，这种方式可以促进开发者更加深入的理解react的整个构建原理及底层实现逻辑；
2. 采用构建工具，更加快捷高效的搭建项目开发环境；

这里主要介绍一下采用官方推荐的构建工具create-react-app

安装构建工具：npm install create-react-app -g
初始化项目： create-react-app project-name
进入项目目录： cd project-name
安装项目依赖包：npm install
运行项目： npm start
打开浏览器，输入localohost:3000即可看到项目

4. react 核心概念

React的核心思想只有一个：封装组件。

最近几年，前端一直流行这各种MV*框架，其知道思想就是向后端开发学习，业务逻辑视图分离，使系统各部分之间耦合性更小、复用性更高、功能更专注；从代码逻辑结构上来讲，就是html、js(controller)、css、router进行拆分集中处理，典型的框架如Angular,Knockout,Ember；相比较而言React有一下几个特别之处:

模块化思想，将web页面不断拆分成各个功能集中的组件，每个组件聚焦于一个或一类功能，代码层面并未对html、js进行区分，甚至进行糅合，由此就蛋生了JSX这种html+js杂糅的‘a faster,safer,esier Javascript’;
虚拟DOM：页面初始化之前；react对于组件在服务端完成DOM tree + Style rules 到render tree的解析，直接将解析后的render tree 返回给浏览器，极大提高了web网站的性能；
单向数据流：页面元素/状态发生变化是，react各层级之间的组件、页面与服务端的数据交互，采用props、state来进行组件间的通讯，虽然代码书写时需要创建各种action来维护UI的更新，没有双向数据绑定那么方便，但UI性能上却很容易得以保证；

总体来说react就是：

一个的中心思想：模块化；
四大核心概念：组件、JSX、Virtual DOM、 one-way-Data-Flow。

参考文章：

react与vue的对比