React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。
以声明式编写UI，可以让你的代码更加可靠，且方便调试。
创建好拥有各自状态的组件，再由组件构成更加复杂的界面。
无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。
无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。
React 也可以用作开发原生应用的框架 React Native。

react库

react.js—— React的核心库
react-dom.js——提供与DOM相关的功能
Browser.js——将JSX语法转为JavaScript语法注：
- 上面3个库放在页面顶部，首先加载
- 此外标签的type属性为text/babel(JSX 语法，跟JavaScript不兼容,通过Browser.js解析);
- 实际上线 babel先build（解析jsx比较耗时）

JSX语法

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
ReactDOM.render() 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点；render()方法只有一个根标签，否则会报错

    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('container')
    );

JSX 的基本语法规则:遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

    let arr=[
        <b>item1</b>,
        <b>item2</b>,
        <b>item3</b>
    ];

    ReactDOM.render(
        <div>
            {
                arr.map(item => <h1>this is {item}</h1>)
            }
        </div>,
        document.getElementById('container')
    );

react组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

    let ComponentA = React.createClass({
        render(){
            return (<h1>this is {this.props.name}</h1>)
        }
    });

    ReactDOM.render(
        <ComponentA name="componentA"/>,
        document.getElementById('container')
    );

注：

组件名首字母必须大写，否则报错
组件必须有render()方法，用于输出组件
render()方法唯一根标签，否则报错
组件标签用法与HTML标签用法相同，name="componentA"表示组件加入一个值为componentA的属性，组件的属性可以在组件类的 this.props 对象上获取
组件的添加javaScript 保留字为属性名时，写法会有区别：如class->className
this.props.children特殊属性
- this.props.children表示组件的所有子节点，类型可能为undefined、object、array（子节点个数），
- React.Children.map(children, function[(thisArg)])可以用来遍历所有子节点而不需考虑节点个数，
- React.Children.forEach(children, function[(thisArg)])类似但是不返回一个数组

    let ComponentA = React.createClass({
        render() {
            return (
                <ul>
                {
                    React.Children.map(this.props.children,item => <li>{item}</li>)
                }
                </ul>
            );
        }
    });

    ReactDOM.render(
      <ComponentA>
        <i>item1</i>
        <i>item2</i>
        <i>item3</i>
      </ComponentA>,
      document.getElementById('container')
    );

PropTypes和getDefaultProps
- PropTypes：就是用来验证组件实例的属性是否符合要求
- getDefaultProps：方法可以用来设置组件属性的默认值``` html let ComponentA = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, }, getDefaultProps() { return { title : ‘Hello World’ }; }, render() { return ( <h1>{this.props.title},{this.props.name}</h1> ); } });
let a=’moning’; ReactDOM.render( <ComponentA name={a}/>, document.getElementById(‘container’) );```

虚拟DOM

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有大专栏 react学习笔记的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。通过为组件指定事件的回调函数，确保了只有等到真实 DOM 发生事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等

this.state

组件与用户交互，组件充当一个状态机，一开始有个初始状态，然后用户交互，改变状态，从而触发UI重新渲染。

  let ComponentA = React.createClass({
      getInitialState() {
        return {liked: false};
      },
      handleClick(event) {
        this.setState({liked: !this.state.liked});
      },
      render() {
        var text = this.state.liked ? 'ON' : 'OFF';
        return (
          <p onClick={this.handleClick}>
            {text} . Click to toggle.
          </p>
        );
      }
  });


  ReactDOM.render(
    <ComponentA/>,
    document.getElementById('container')
  );

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

表单输入框

文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

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


    ReactDOM.render(
      <ComponentA/>,
      document.getElementById('container')
    );

组件的生命周期

组件的生命周期分成三个状态：
1. Mounting：已插入真实 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
1. componentWillMount()
2. componentDidMount()
3. componentWillUpdate(object nextProps, object nextState)
4. componentDidUpdate(object prevProps, object prevState)
5. componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
1. componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
2. shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

    let ComponentA = React.createClass({
        getInitialState() {
          return {
            opacity: 1.0
          };
        },

        componentDidMount() {
          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() {
          return (
            <div style=>
              Hello world
            </div>
          );
        }
    });


    ReactDOM.render(
      <ComponentA/>,
      document.getElementById('container')
    );

组件的数据来源

通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

组件

react学习笔记

react库

JSX语法

react组件

虚拟DOM

this.state

表单输入框

组件的生命周期

组件的数据来源