自学React 入门

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

回到顶部