React学习笔记。

　　有段时间没写博客了，最近这段时间有点说不出的苦，虽然说年轻的时候该多出去经历些事，但每次找工作东跑西跑，坐公交坐地铁浪费了我太多时间，我感觉到这是一种浪费，对生命的浪费。所以很想尽快找到一份工作，去努力去奋斗。这两天周末，没有什么招聘，在租房里学习了React框架。因为很多公司技术要求都有这个框架，想学习学习提高一些新技术的把握，以后如果需要可以深入学习一下。虽然自己写博客水平很差，但还是得坚持写下去。

　　学习过程主要看了阮一峰的React入门，在git上下了他的教程，然后把每个教程都自己跟着敲了一遍，最后又根据记忆自己动手从头根据自己的理解来敲，这样效率很高，不得不说这样的学习方法很实用，这也是这几年自学领悟的方法。下一个学习目标，Zepto框架。嗯。移动端对于我来说是个问题，现在有必要攻破它。

1.前言

　　如果大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个 虚拟 DOM ，组件 DOM 结构就是映射到这个虚拟 DOM 上，React 在这个虚拟 DOM 上实现了一个 diff 算法，当要更新组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个虚拟 DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

　　Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。React 主要的目标是提供一套不同的, 高效的方案来更新 DOM.不是通过直接把 DOM 变成可变的数据, 而是通过构建 “Virtual DOM”, 虚拟的 DOM, 随后 React 处理真实的 DOM 上的更新来进行模拟相应的更新。

2.依赖包

　　要想使用React需要引入下面这3个js文件，其中react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>

　　可以说React和JSX没有必定的联系，没有JSX的React也可以单独运行，但你还是会发现，这两者就是双胞胎嘛。一般都会一起使用。

　　下面我们来看一下JSX在React中的使用。

　　3.JSX　　

　　　先来看一个例子。　　

　　　 var arr = ["yh1","yh2","yh3"];
      ReactDOM.render(
      <div>
      {                               //使用JS规则解析
        arr.map(function(item){
          return <p>fuck,{item}</p>
        })
      }
      </div>,
      document.body
      )

　　HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX语法。解析过程为遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

　　4.组件

　　React中感觉最厉害的地方就是组件了，具体细节大家可以看阮一峰老师的博客，这里我记录自己需要记忆的部分。

　　React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined还是 object。

　　其中组件类this.props可以获取标签中属性。

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {   //this.props.children = [<span>hello</span>,<span>world</span>];
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

　　组件的属性可以接受任意值，字符串、对象、函数等等都可以。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求.

　　

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

　　上面例子中propTypes规定组件中必须有一个title属性，而且这个属性必须是string类型，当传入数值时就会报错，上诉代码会报错。

   getDefaultProps 方法可以用来设置组件属性的默认值。

　　

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

　　组件中的state状况我掌握得比较多，是一个非常有用的东西，希望大家熟练使用，因为我比较熟练，这里就不记录了。

　　下面是获取表单内容时使用event.target.value。这里没有其他方法，只能靠记忆。

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

　　下面是React中比较重要的一个东西，组件的生命周期。

　　5.组件的生命周期

　　组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

　　React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

　　此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

　　

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

　　附加一个例子来记忆这个componentDidMount方法，当组件转化为真实DOM后调用的方法，控制透明度，这个方法我独立写过几次，前2次都失败了，仔细检查之后发现<div style={{opacity:this.state.opacity}}>这里容易出错。大家需要注意注意。

　　结尾

　到这里呢，react框架的笔记记录完成，上面记录的东西以后都需要经常反复查看，然后没事可以自己用React写一些东西玩玩，嗯，以后每次学习一些新知识都会记录一下，这样呢方便管理自己的知识线，以后如果有需要也能快速的回忆。

　 这段时间虽然很难受，但还是磨练了我的耐性，我知道我会有一个美好的未来，我知道我以后一定会成为一个对社会有用的人。感谢大家。