自学React 入门

  • Z时代
  • 2024-01-10
  • 分类：综合

react

刚开始学习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标记；

以上是 自学React 入门 的全部内容， 来源链接： utcz.com/z/384345.html

回到顶部