初识React(3)：组件

FullStackDeveloper 发布于2019-08-26 12:19 / 3364人阅读

摘要：创建组件创建组件之前要注意以下几点组件创建的名称首字母得大写组件中返回的只能是一个根节点，所有的内容得用一个元素都框起来无状态函数式组件无状态函数式组件可以理解成就是一个函数生成的，使得代码的可读性更好，并且精简便利，减少了冗余，无状态组件

创建组件

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

组件创建的名称首字母得大写

组件中返回的JSX只能是一个根节点，所有的内容得用一个元素都框起来

1.无状态函数式组件

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

组件无法被实例化，整体渲染提高

组件不能访问this对象，因为没有实例化，所以无法访问到this对象

组件没有生命周期

无状态组件只能访问输入的props，没有state状态

import React from "react"
import { connect } from "dva";

 function CreateComponent(props) {
   console.log(props);
   return (
     
        {props.name}今年{props.age}岁
     
   )
 }

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(
         
           标题
            
              首先
              其次
              最后
            
         
       )
     }
}

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 (
       
         监听事件
         

         this对象
      
      )
    }

}

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 (
       
         flag的值为：{this.state.flag ? "真" : "假"}
         

         
      
      )
    }

}

export default CreateComponent;

3.组件的props

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

import React from "react";

function NewComponent(props) {
  return (
    
       {props.content}
    
  );
}


export default NewComponent;

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

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

class CreateComponent extends React.Component {
    render() {
      return (
       
         
      
      )
    }

}

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


      )
    }

}

export default CreateComponent;

输出结果：

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束

componentWillUnmount组件删除

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

import React from "react";

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

  render() {
    return (
      
         {this.props.content}
      
    );
  }

}

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 (
       
         页面渲染
         
         {!this.state.isDelete?(
          
         ):(null)}

      


      )
    }

}

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 (
       
         页面渲染
         
         {!this.state.isDelete?(
          
         ):(null)}

      


      )
    }

}

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

}

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 (
       
         页面渲染
         
         {!this.state.isDelete?(
          
         ):(null)}

      


      )
    }

}

export default CreateComponent;

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

componentWillUpdate：

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

componentDidUpdate：

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

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

GPU云服务器云服务器 docker初识初识关系数据库 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108474.html

React系列---React（一）初识React

摘要：系列一初识系列二组件的和系列三组件的生命周期是推出的一个库，它的口号就是用来创建用户界面的库，所以它只是和用户界面打交道，可以把它看成中的视图层。系列一初识系列二组件的和系列三组件的生命周期 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 评论0 收藏0
react开发教程（－）初识

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...

Allen 2019-08-21 15:36 评论0 收藏0
初识React(8)：父子组件传参

摘要：父级向子级传参父子组件通信主要用到，如下在父组件中父组件我是父级过来的内容在子组件中子组件通过上面例子可以看出，在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过获取父组件传过来的参数子级向父级传参在父组件中父级向子级传参父子组件通信主要用到props，如下：在父组件中： import React from react import ChildCo...

paulli3 2019-08-23 11:48 评论0 收藏0
初识React

摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。初识React 依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Co...

kuangcaibao 2019-08-21 14:47 评论0 收藏0

发表评论

登陆后可评论

0条评论

FullStackDeveloper

男|高级讲师

我要关注我要私信

TA的文章

虚拟主机用用什么管理平台-虚拟主机管理系统有什么用？

阅读 1092·2021-09-22 16:04
纯CSS实现垂直居中的几种方法

阅读 1474·2019-08-30 15:43
CSS简洁笔记

阅读 1038·2019-08-29 14:01
初识React(3)：组件

阅读 3365·2019-08-26 12:19
【JavaScript】Promise

阅读 3321·2019-08-26 12:15
JS面试理论题

阅读 1414·2019-08-26 12:13
浏览器渲染机制

阅读 3211·2019-08-23 17:00
每日 30 秒 ⏱ 数组所有数据是否满足某条件

阅读 1444·2019-08-23 15:38

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

初识React(3)：组件

标题

constructor组件初始化：

componentWillMount组件渲染之前：

componentDidMount组件渲染之后：

render组件渲染：

componentWillUnmount组件删除

shouldComponentUpdate(nextProps, nextState)

componentWillReceiveProps(nextProps)

componentWillUpdate：

componentDidUpdate：

相关文章

***React系列---React（一）初识React***

react开发教程（－）初识

**初识React(8)：父子组件传参**

初识React

发表评论

0条评论

FullStackDeveloper

男|高级讲师

TA的文章

虚拟主机用用什么管理平台-虚拟主机管理系统有什么用？

纯CSS实现垂直居中的几种方法

CSS简洁笔记

初识React(3)：组件

【JavaScript】Promise

JS面试理论题

浏览器渲染机制

每日 30 秒 ⏱ 数组所有数据是否满足某条件

最新活动