zoukankan      html  css  js  c++  java
  • 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?

    1. 让我们先抛弃所有的框架库概念,简单的从一个最简单的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各层级之间的组件、页面与服务端的数据交互,采用propsstate来进行组件间的通讯,虽然代码书写时需要创建各种action来维护UI的更新,没有双向数据绑定那么方便,但UI性能上却很容易得以保证;

    总体来说react就是:

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

    参考文章:

  • 相关阅读:
    c++——类 继承
    Pytorch Tensor, Variable, 自动求导
    Python-OpenCV实现二值图像孔洞填充
    神经网络手写数字识别numpy实现
    神经网络反向传播公式推导
    转:Markdown语法大全
    markdown居中对齐,左对齐,右对齐
    硬编码与软编码
    转:Markdown数学公式语法
    Python if __name__=='__main__'
  • 原文地址:https://www.cnblogs.com/hbzyin/p/7544734.html
Copyright © 2011-2022 走看看