初识React(3)：组件

2024年3月7日 136次阅读 来源: hope93

创建组件

创建组件之前要注意以下几点：

  1. 组件创建的名称首字母得大写
  2. 组件中返回的JSX只能是一个根节点，所有的内容得用一个元素都框起来

1.无状态函数式组件

无状态函数式组件可以理解成就是一个函数生成的，使得代码的可读性更好，并且精简、便利，减少了冗余，无状态组件有以下特点：

  1. 组件无法被实例化，整体渲染提高
  2. 组件不能访问this对象，因为没有实例化，所以无法访问到this对象
  3. 组件没有生命周期
  4. 无状态组件只能访问输入的props，没有state状态
import React from 'react'
import { connect } from 'dva';

 function CreateComponent(props) {
   console.log(props);
   return (
     <div>
        <span>{props.name}今年{props.age}岁</span>
     </div>
   )
 }

export default connect(state => ({
  name:'小明',
  age:15
}))(CreateComponent);

2.React.Component类组件

每个组件类必须要实现一个render方法，这里要特别注意，这个render方法必须要返回一个JSX元素即要用一个最外层的元素将所有内容都包裹起来，如果返回并列多个JSX元素是不合法，如下所示：

import React from 'react'

class CreateComponent extends React.Component {
     render() {
       return(
         <div>
           <h2>标题</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最后</li>
            </ul>
         </div>
       )
     }
}

export default CreateComponent;

以上实例，就是把h2元素和ul用一个div都给包起来

1.组件的事件监听

import React from 'react'

class CreateComponent extends React.Component {

   clickFunc = (e) => {
     console.log("监听:",e.target.innerHTML);
   }

   clickValue = (value) => {
     console.log(value);
   }
    render() {
      return (
       <div>
         <a onClick={this.clickFunc}>监听事件</a>
         <br/>
         <a onClick={this.clickValue.bind(this,123)}>this对象</a>
      </div>
      )
    }

}

export default CreateComponent;

以上就是事件监听和传参实例

2.组件的state和setState

通常在组件中，state是用来放这个组件内部参数的状态的，而setState是用来改变state里面的参数，例如：

import React from 'react'

class CreateComponent extends React.Component {
  state = {
    flag : true
  }
   clickValue = () => {
     this.setState({
       flag: !this.state.flag
     })
   }
    render() {
      return (
       <div>
         <span>flag的值为：{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改变flag值</button>
      </div>
      )
    }

}

export default CreateComponent;

3.组件的props

props是组件里面的属性，在组件内部是不能更改自己本身的props的，比如，建立一个组件，然后在另外一个组件里面调用这个组件，如下：

import React from 'react';

function NewComponent(props) {
  return (
    <div>
       {props.content}
    </div>
  );
}


export default NewComponent;

建立一个组件NewComponent,然后调用，如下：

import React from 'react'
import NewComponent from './newComponent.js'

class CreateComponent extends React.Component {
    render() {
      return (
       <div>
         <NewComponent content={'我是内容'} />
      </div>
      )
    }

}

export default CreateComponent;

从这里可以看出，props就是组件带入的属性值，props其实就是让外部组件对自己进行配置，而state是组件控制自己的状态

4.组件的生命周期

constructor组件初始化：

constructor初始化一些参数属性等等

componentWillMount组件渲染之前：

componentWillMount这个函数在react16.3.0之后慢慢的被弃用了，使用componentDidMount替换

componentDidMount组件渲染之后：

componentDidMount在组件渲染之后实行，可以加载数据

render组件渲染：

render组件渲染显示页面

import React from 'react'

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化')
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }


    render() {
      console.log('render：页面渲染');
      return (
       <div>
         页面渲染
      </div>


      )
    }

}

export default CreateComponent;

输出结果：

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
componentWillUnmount组件删除

componentWillUnmount函数是在组件要删除之前执行的函数，如下代码：

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  render() {
    return (
      <div>
         {this.props.content}
      </div>
    );
  }

}

export default NewComponent;

建立一个组件NewComponent，然后在CreateComponent组件中引入这个组件，如下：

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <div>
         页面渲染
         <input type="button" value='删除' onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </div>


      )
    }

}

export default CreateComponent;

当点击删除按钮的时候，组件NewComponent会被删除，在删除之前会执行componentWillUnmount函数

输出结果：

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
componentWillUnmount:将要从页面中删除

以上几个生命周期是我们会常用到的组件生命周期，组件的生命周期还有更新阶段的生命周期，不过这些比较少用，这里简单介绍一下：

shouldComponentUpdate(nextProps, nextState)

通过这个方法控制组件是否重新渲染，如果返回false不会重新渲染，如下

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  shouldComponentUpdate(nextProps, nextState){
    if(nextState.isDelete){
      return false;
    }

  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <div>
         页面渲染
         <input type="button" value='删除' onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </div>


      )
    }

}

export default CreateComponent;

此时点击删除按钮，页面没有进行渲染，那是因为在shouldComponentUpdate中设置了返回值为false，当返回值为false的时候，页面无法重新渲染。这个函数第一个参数表示最新的props，第二个参数表示最新的state

componentWillReceiveProps(nextProps)

组件从父组件接收到新的 props 之前调用，函数的参数nextProps表示接收到的数据

在NewComponent组件中：

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      <div>
         {this.props.content}
      </div>
    );
  }

}

export default NewComponent;

在组件CreateComponent中：

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  changeFunc = () => {
    this.setState({
      content:'文字修改'
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <div>
         页面渲染
         <input type="button" value='修改content' onClick={this.changeFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </div>


      )
    }

}

export default CreateComponent;

不过componentWillReceiveProps将在react16.3.0开始之后弃用

componentWillUpdate：

组件重新渲染之前调用这个方法，将在react16.3.0开始之后弃用

componentDidUpdate：

组件重新渲染并且把更改变更到真实的 DOM 以后调用

注意： componentWillUpdate、componentWillReceiveProps、componentWillMount这三个生命周期将在react116.3.0之后开始弃用，具体详情可查看官网：https://reactjs.org/docs/reac…

    原文作者：hope93
    原文地址: https://segmentfault.com/a/1190000016110180
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞