在新公司移动项目组做前端开发，项目组是做移动端APP的。
APP里的部分页面需要用H5来做，目前项目组只有我一人前端。
刚来的一周，因为暂时开发任务下不来，leader让看下目前流行的前端框架，当时举例说了个reactjs
之前使用过的框架只有angularjs，而且只是后台管理项目用到，感觉不适合在移动端使用
然后就看了下reactjs和vue.js, 这两个类似。
reactjs的介绍是：用于构建用户界面的JAVASCRIPT库
vue.js的介绍是：一个构建数据驱动的 web 界面的库，自身不是一个全能框架——它只聚焦于视图层

多数人认为reactjs是一个框架，虽然官方明确说明是一个库。
这会也不得不说下jquery,这个也有很多人认为是框架，在面试的时候也遇到过人这么说。

初步了解了下框架后，看了产品的原型图，以及可能要用H5开发的页面，并不是特别复杂，基本是展示页面和一些简单的交互，觉得都不算一个SPA。
用框架可能有点大材小用，并且框架也占有空间。
最后就确定使用zepto+underscore+require开发。
然后就是搭建框架和工程环境。
完成过后，UE还没有出H5相关的页面。
可能leader觉得reactjs特别好，或者说情有独钟，然后又让我再看下reactjs。(当然也有可能是因为没事干的原因)
心想，反正也没事干，干脆把reactjs学一遍。
于是就从头开始。
在上一个公司，当时的leader让我看了下reactjs，让看看组件开发模式怎么样,看是否能应用到项目中。当时也只是粗略的了解了下，后面就不了了之了

reactjs是干什么的

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库
特点：

仅仅是UI
许多人使用React作为MVC架构的V层。尽管React并没有假设过你的其余技术栈，但它仍可以作为一个小特征轻易地在已有项目中使用
虚拟DOM
React为了更高超的性能而使用虚拟DOM作为其不同的实现。它同时也可以由服务端Node.js渲染－而不需要过重的浏览器DOM支持
数据流
React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
组件开发
通过 React 你唯一要做的事情就是构建组件

hello world!

使用reactjs，需要引入文件：

1
2
3

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script> //此文件在使用JSX时需要引用，否则可以不引用

不使用JSX语法

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

使用JS语法

<html>
<head>
    <meta charset="UTF-8" />
    <title>hello world!</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="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>

交互

最基本的数据输入的绑定：

var App = React.createClass({
  getInitialState:function(){
    return {data:0};//此处必须返回对象
  },
  render: function() {
    return <div>{this.props.data} <br />
    <input type="text" value={this.state.data} onChange={this.inputChange}/> <br/>
    <label>{this.state.data}</label>
    </div>;
  },
  inputChange:function(event){
    this.setState({//此处不能直接设置state：this.state.data=...;绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。
      data:event.target.value
    })
  }
});

ReactDOM.render(
    <App data='i am from props' />,
    document.getElementById('container')
);

setState是触发UI更新的主要方法
setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。
不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。

本文地址： http://gehaiqing.com/2016/08/18/reactjs-study-1/

@葛海清的个人空间

reactjs初识

2016-08-18 22:56:26
tech

reactjs是干什么的

hello world!

交互