当前位置:Gxlcms > JavaScript > React入门学习:React创建组件的方法

React入门学习:React创建组件的方法

时间:2021-07-01 10:21:17 帮助过:23人阅读

创建组件

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

  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 (
     <p>
        <span>{props.name}今年{props.age}岁</span>
     </p>
   )
 }

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(
         <p>
           <h2>标题</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最后</li>
            </ul>
         </p>
       )
     }
}

export default CreateComponent;

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

1.组件的事件监听

import React from 'react'

class CreateComponent extends React.Component {

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

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

}

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 (
       <p>
         <span>flag的值为:{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改变flag值</button>
      </p>
      )
    }

}

export default CreateComponent;

3.组件的props

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

import React from 'react';

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


export default NewComponent;

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

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

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

}

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 (
       <p>
         页面渲染
      </p>


      )
    }

}

export default CreateComponent;

输出结果:

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

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

import React from 'react';

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

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

}

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 (
       <p>
         页面渲染
         <input type="button" value='删除' onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

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 (
       <p>
         页面渲染
         <input type="button" value='删除' onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

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 (
      <p>
         {this.props.content}
      </p>
    );
  }

}

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 (
       <p>
         页面渲染
         <input type="button" value='修改content' onClick={this.changeFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

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

componentWillUpdate:

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

componentDidUpdate:

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

注意: componentWillUpdate、componentWillReceiveProps、componentWillMount这三个生命周期将在react116.3.0之后开始弃用

相关推荐:

React组件生命周期实例分析

React组件Dragact 0.1.4详解

以上就是React入门学习:React创建组件的方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行