首页 > 代码库 > 浅析 react

浅析 react

  1. JSX
    1. 注释:在一个组件的子元素位置使用注释要用 {} 包起来
      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> : ‘‘ 
        } 
    2. 元素属性  

      1. class 属性改为 className    

      2. for 属性改为 htmlFor  

    3. React 组件的构建

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

    4. 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. 在适合的情况下,我们都应该且必须使用无状态组件。无状态组件不像上述两种方法在调用
            时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配,做到了内部
            优化。

浅析 react