浅析 react

1. const App = (
    <Nav>
    {/* 节点注释 */}
    <Person
    /* 多行
    注释 */
    name={window.isLoggedIn ? window.name : ‘‘}
    />
    </Nav>
   ); 

   　　但 HTML 中有一类特殊的注释——条件注释，它常用于判断浏览器的版本：

2. <!--[if IE]>
    <p>Work in IE browser</p>
   <![endif]-->

   　　上述方法可以通过使用 JavaScript 判断浏览器版本来替代：

3. {
    (!!window.ActiveXObject || ‘ActiveXObject‘ in window) ?
    <p>Work in IE browser</p> : ‘‘
   } 

1. class 属性改为 className
2. for 属性改为 htmlFor

1. React 组件即为组件元素
2. React 组件基本上由 3 个部分组成——属性（props）、状态（state）以及生命周期方法
3. React 组件可以接收参数，也可能有自身状态。一旦接收到的参数或自身状态有所改变，
   React 组件就会执行相应的生命周期方法，最后渲染。整个过程完全符合传统组件所定义的组件
   职责。

1. React.createClass

   1. const Button = React.createClass({
       getDefaultProps() {
       return {
       color: ‘blue‘,
       text: ‘Confirm‘,
       };
       }, 
      
       render() {
       const { color, text } = this.props; 
      
       return (
       <button className={`btn btn-${color}`}>
       <em>{text}</em>
       </button>
       );
       }
      });

      1. 在 0.14 版本发布之前，这一直都是 React 官方唯一指定的组件写法
      2. 只用写成 <Button />，就可以被解析成 React.createElement(Button) 方法来创建 Button
         实例，这意味着在一个应用中调用几次 Button，就会创建几次 Button 实例
2. ES6 classes

   1. import React, { Component } from ‘react‘; 
      
      class Button extends Component {
       constructor(props) {
       super(props);
       } 
      
       static defaultProps = {
       color: ‘blue‘,
       text: ‘Confirm‘,
       }; 
      
       render() {
       const { color, text } = this.props; 
      
       return (
       <button className={`btn btn-${color}`}>
       <em>{text}</em>
       </button>
       );
       }
      }

      React 的所有组件都继承自顶层类 React.Component。它的定义非常简洁，只是初始化了
      React.Component 方法，声明了 props、context、refs 等，并在原型上定义了 setState 和
      forceUpdate 方法。内部初始化的生命周期方法与 createClass 方式使用的是同一个方法
      创建的。

无状态函数（stateless function）

1. function Button({ color = ‘blue‘, text = ‘Confirm‘ }) {
    return (
    <button className={`btn btn-${color}`}>
    <em>{text}</em>
    </button>
    );
   } 

   1. 无状态组件只传入 props 和 context 两个参数；也就是说，它不存在 state，也没有生命周
      期方法，组件本身即上面两种 React 组件构建方法中的 render 方法。不过，像 propTypes 和
      defaultProps 还是可以通过向方法设置静态属性来实现的。
   2. 在适合的情况下，我们都应该且必须使用无状态组件。无状态组件不像上述两种方法在调用
      时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配，做到了内部
      优化。