React学习笔记之组件基础

系列文章目录

---

一、类组件

除了使用函数来创建组件之外，还可以使用ES6的类来创建组件，该类继承React.Component，并且拥有一个render( )函数，返回要渲染的React元素。

const { Component } = React
class Welcome extends Component {
     // props 父组件给子组件的数据
     constructor(props) {
         super(props);
         // state 组件内数据
         this.state = {
             msg: '123',
         };
     }
     // this 指向组件实例
     render() {
         return <div>hello{this.state.msg}--{this.props.msg}</div>;
     }
 }
 ReactDOM.render(<Welcome msg="hello" />, document.getElementById('one'))

组件数据

组件数据有两种：使用组件时传递的数据（Props）
、组件内数据（State）

Props

props是在外部使用组件时传递的数据 ，通过标签传递<Welcome msg="hello" />，可以在组件内用构造函数接收props。

State

可以在构造函数中声明State作为组件的默认数据，类组件实际上就是一个JS类，state实际相当于实例的属性，每创建出一个组件，他都有实例属性State。

当然实际上，类组件作为类，也可以不使用构造函数，直接在类内声明State。

以上的代码也可以写成：

const { Component } = React
class Welcome extends Component {
    state = {
        msg: '123'
    }
    // this 指向组件实例
    render() {
        return <div>hello{this.state.msg}--{this.props.msg}</div>;
    }
}
ReactDOM.render(<Welcome msg="testMsg" />, document.getElementById('one'))

二、State

State是组件内的数据，也是组件内部维护的一组用于反映组件UI变化的状态集合。

State的特点

1.不能直接修改

State可以直接修改，但是这些不会触发渲染函数，无法更新页面。必须使用this.setDate( )来修改数据。

2.更新是异步的

如果使用this.setDate来更新数据，数据的变化不是立即执行的，如果你要更新完数据立即进行某些操作，可以使用回调函数实现。

3.更新是浅合并

更新数据时采用浅合并

使用setDate( )

例：

const { Component } = React
class Welcome extends Component {
    state = {
        msg: 'hello'
    }
    ChangeMsg = () => {
        this.setState({
            msg: 'byebye'
        }, () => {
            //修改完之后的回调函数
            console.log('修改成功')
        })
    }
    //渲染函数
    render() {
        console.log(this)
        return (<div>{this.state.msg}
            <button onClick={this.ChangeMsg}>修改数据</button>
        </div>);
    }
}
ReactDOM.render(<Welcome />, document.getElementById('one'))

以上是一个按钮触发事发来修改数据的例子，其中需要注意的一点是，使用setDate的函数必须是一个箭头函数，箭头函数能中this指向外部的this，只有外部的this(也就是实例对象)才有this.setDate方法，否则的话，this的指向就会使undefined。

三、生命周期:

和Vue类似，React组件也有自己的生命周期。

按照我自己的理解，主要可以分为四个阶段

1.初始化阶段

React组件实际是JS类，在初始化阶段，执行构造函数，对组件的State、Props赋值。

2.挂载阶段

组件初始化完毕，拥有了实例属性了后，要将组件渲染到页面上。
这个阶段包括

• 1.componentWillMount

  发生在 render 函数之前，还没有挂载

• 2.render

  渲染组件

• 3.componentDidMount

  发生在 render 函数之后，完成挂载

完成以上动作后，组件进入运行状态

3.更新阶段

当组件内的数据发生变化时，组件要判断是否重新渲染，并作出相应动作

props发生改变

• 1.componentWillReceiveProps( )

  这个生命周期主要为我们提供对 props 发生改变的监听

• 2.shouldComponentUpdate ( )
  返回一个 Boolean 类型的值，用于判断是否需要更新渲染组件，默认是重新渲染。

• 3.componentWillUpdate( )
  数据发生改变前的钩子函数

• 4.render( )
  执行 render 函数。

• 5.componentDidUpdate( )
  完成渲染，Dom已经发生变化

state发生改变

和props基本一致，知识没有第一步componentWillReceiveProps( )

4.卸载阶段

componentWillUnmount( )
在组件卸载之前直接调用

总结

简单总结了一下React组件的基础