初识React(3)：组件

头像
hope93
    阅读 7 分钟
    1

    创建组件

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

    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...

    javascriptreact
    hope93
    469 声望18 粉丝

    世上无难事，只要肯放弃。。。

    « 上一篇
    初识React(2)：什么是JSX？
    下一篇 »
    初识React(4)：ref属性

    引用和评论

    推荐阅读
    头像
    JS数组去重

    hope93赞 12阅读 9.6k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新