自学React 入门

Posted 2021-02-15 zero-zm

刚开始学习React, 读了官网和别人的一些博客，总结了一部分内容，记录一下。有错误欢迎指正。。。

一、自定义组件需要了解知识

1. 组件分类

React中有两种类型的组件，一种是”方法组件“，一种是”类组件“;

(1). 区别

方法组件:

• 不具有state状态；只用于展示数据，不做逻辑处理；

• 不具有render()方法，直接返回JSX对象或null对象；

• 示例：

       function Welcome(props) {

  return (

    // 此处注释的写法 

    <div className="shopping-list">

      {/* 此处 注释的写法 必须要{}包裹 */}

      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>

  )

}

ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')

)

类组件

• 具有state状态；有业务逻辑，需要操作数据(state);

• 必须有render()方法；render()方法返回的对象必须有根元素且只能有一个，可以为JSX对象或null对象；

• 需要在构造方法中使用super(props)才可在组件的后续内容中使用this;

• 示例：

class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }

  // class创建的组件中 必须有render方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}    

(2). 相同点

• 定义的名称首字母均大写；（React通过此来判断是否为一个组件）
• 返回值最好都用()包含；
• 返回值为JSX对象或null对象；
• 都接受父组件传递的props对象属性，且子组件不可修改；

2. 数据对象: props和state

(1). props

• 用于存储父组件传递给子组件的参数；React会将传递的参数转换为对象赋值给props;
• 只读属性；子组件接收父组件的props参数，子组件不可修改；
• 实例化：①. 从父组件传递过来，在子组件中通过super(props)实例化；②. 通过组件类的静态属性defaultProps来初始化props；(组件名.defaultProps = {color: ‘red‘};)

(2). state

• 用于给组件内部提供数据，检测组件自身数据的变化；（因为不能修改props属性，所有需要state来记录组件自身变化）
• 只有类组件才具有状态
• 初始化位置: 构造方法中
• 作用域：组件内
• 不可在render()方法中修改state对象的值，会造成死循环；
• 不可在state对象中定义render()方法中不需要的数据，影响渲染性能；

3. 类组件部分内容介绍

(1). super() 方法

super()方法用于访问父组件的构造方法；如继承中 类1 extends 类2 {};;此时类1若想访问类2的构造方法，就需要使用super()方法；

类组件中super(props)作用

• 类组件中，继承了ReactComponent类。 在构造方法中，使用super(params)方法，用来调用父组件ReactComponent类的构造方法来实例化props属性；
• 在子类的构造方法中必须先调用super()才可以在super()之后的语句中使用this; 若无super(),则this为null; 因为使用Function或Class创建的组件，组件方法内的this是null的，若想让this指向本组件，需要手动绑定，解决办法:①. 构造方法中使用super(props); ②. bind绑定；③。 箭头函数绑定；

(2). render() 方法

• render()方法用于渲染组件DOM,创建DOM树；当props传入或state对象更新时，React会重新调用render()方法，对比更改前和更改后的DOM, 更新DOM树；
• key值使用: 数组上下文元素应该指定key值，因为部分情况会导致React更新整颗树；key值只需要保持与其他兄弟节点唯一即可，不需要全局唯一；React会根据key值来比较原树和新树，进行选择性更新；

(3).defaultProps 和 propTypes静态属性

• defaultProps 用于组件内部定义props对象
• propTypes 用于约束props对象内的属性类型；

(4). 条件判断使用

• {条件 && 条件符合执行}
• {条件 ? (符合执行) : (不符合执行)}

4. 组件生命周期

(1). 创建/实例化组件 - constructor(){}

• 获取props, 类组件实例化Props;
• 类组件初始化state;

(2). 挂载 - componentWillMount(){}

• 发生于render()之前
• 获取不到DOM对象
• 改变State属性不会重新渲染组件

(3). 渲染 - render(){}

• 获取不到DOM对象
• 不能修改state值，会造成递归渲染

(4).挂载完成 - componentDidMount(){}

• 可获取DOM对象 - document.getElementById(...);
• 可修改state值
• 可发送请求数据

二、React自带的组件介绍

1. Provider组件

组件之外使用Provider包裹，作用是将store放入context对象中，使子孙组件可以获取到store的值；

2. Helmet组件

管理对文档头的修改，采用纯html标记并输出纯HTML标记；