react系列-01

时间 2019-11-12

标签 react 系列栏目 React 繁體版

原文原文链接

React 1

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

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-appcss

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

4. react 核心概念

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

最近几年，前端一直流行这各类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就是：vue

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

参考文章：java

react与vue的对比