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

来源：动视网责编：小采时间：2020-11-27 19:32:02

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

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

推荐度：

点击下载本文 文档为doc格式

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

创建组件

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

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

1.无状态函数式组件

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

组件无法被实例化，整体渲染提高
组件不能访问this对象，因为没有实例化，所以无法访问到this对象
组件没有生命周期
无状态组件只能访问输入的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;