react学习笔记1

时间 2019-11-11

标签 react 学习笔记栏目 React 繁體版

原文原文链接

1.reactJs简介javascript

　　react起源于faceboo的内部项目，由于该公司对市场全部的javascript mvc框架都不满意，因而决定本身写一条，用来架设Instagram的网站。作出来之后，发现这套东西和好用，就在2013年5月开源了。因为其代码逻辑很是简单，性能出众，因此用的人愈来愈多，认为它多是未来web开发的主流工具。html

　　reactJs官网地址： http://facebook.github.io/react/前端

　　github地址：https://github.com/facebook/reactjava

　　react不是完整的mvc框架，最可能是mvc种的view；react的服务器端render能力算得上是一个锦上添花的功能。react有独特的JSX语法，和javascript不兼容。react

　　在web开发过程当中，咱们总的药将变化的数据实时反应到UI上，这时候就须要对DOM进行操做。而复杂或频繁的DOM操做一般是性能瓶颈产生的缘由（如何进行高性能的复杂DOM操做一般是衡量一个前端开发人员技能的重要指标）。git

　　react中为此引入了虚拟DOM（virtual dom）的机制：在游览器端用javascript实现了一套DOM API。基于react进行开发时全部DOM构造都是经过virtual dom的机制，每当数据变化时，react都会从新构建整个dom树，而后react将当前整个dom树和上一次dom树进行对比。获得dom的变化后，仅仅将须要变化的部分进行实际的游览器dom更新。github

　　并且，react可以批处理dom的刷新，在一个事件循环（event loop）内的两次数据变化合并。好比，你先将A变成B，而后又将B变成A，那么react认为UI不发生任何变化。任何变化都是经过总体刷新完成的。web

　　react推荐以组建的方式去从新思考UI的构成，将UI每个功能相对独立的模块定义成组件，而后将小的组件经过组合或者嵌套的方式构成大的组件。而组件应该有以下特征：npm

　　（1）可组合：能够和其余组件一块儿使用，也能够嵌套在另外一个组件内部。服务器

　　（2）可重用：每一个都是有独立的功能

　　（3）可维护性：包含自身的逻辑，容易被理解和维护

　　若是说mvc的思想让你作到视图－数据－控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。

2.getting Started

　　browser.min.js : 将JSX语法转为javascript

　　react.js : 是react的核心库

　 react-dom.js : 提供与DOM相关功能

　　(1)代码总览

　　（2）游览器里看到的效果

　　（3）代码（引入文件夹build去官网下载react文件就能够了,或者经过npm安装）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

3.jsx语法

　　HTML语言直接写在javascript语言中，不加任何引导，这就是JSX的语法。它容许HTML与javascript的混写。好比：

　　(1)代码预览

　　（2）游览器里效果

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['cynthia','wupore','selene'];
      ReactDOM.render(
        <div>
          {
            names.map(function(name){
              return <div>hello,{name}</div>
            })
          }
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

4.react组件属性

　　举个例子：

　　（1）代码预览

　　（2）游览器里效果

　　（3）源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
      var Component = React.createClass({
        displayName : 'Component',
        render:function(){
          return React.createElement('div',null,"Component",this.props.name);
        }
      });

      ReactDOM.render(
        React.createElement(Component,{name:"+cynthia"}),
        document.getElementById('example')
      );
    </script>
  </body>
</html>