浅析 react

Posted 2020-09-14 Caraxiong

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