React创建组件的方法

今天小编给大家分享一下React创建组件的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、成都西信服务器托管、云服务器、虚拟主机、网站系统开发经验，已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟主机、域名与空间、VPS主机、云服务器、香港云服务器、免备案服务器等。

组件介绍

组件(Components) 让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计。

从定义上来说， 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容。

Props ， 即属性(Property)， 在代码中写作 props，故可用 props 指代 properties。
react中有两种组件：类组件（class components）、函数组件（function components）

创建类组件

类组件的定义有如下要求：

• 类组件需要继承自 React.Component

• 类组件必须实现render函数

在ES6之前，可以通过create-react-class 模块来定义类组件，但是目前官网建议我们使用ES6的class类定义。

使用class定义一个组件：

class App extends Component {
  constructor() {
    super()
    this.state = {}
  }

  render() {
    return 
Hello App
  }
}

我们来详细分析一下类组件有哪几个部分

• constructor：这是类组件的构造函数，是可选的，我们通常在constructor中初始化一些数据；

• this.state：我们在constructor中给类组件加入state属性，你可以理解为组件中有一个state对象，其中包含着各种属性，用于维护组件内部的数据。同时你可以通过this.state.<属性名>访问该属性；

• render()： 该方法是 class 组件中唯一必须实现的方法，类组件通过render()返回组件的显示内容；

关于 state

我们可以通过this.state给类组件添加数据对象，我们可以通过this.state.<属性名>去访问我们setState中的属性。

constructor(props) {
    super(props);
    this.state = {
      name:"xhs-rookies"
    }
  }

render(){
    return 
{this.state.name}
  }

但是我们想要修改上述例子中的name属性的时候，则必须通过react给我们规定好的setState()方法，去给state添加或者修改其中的数值。

this.state.name = 'new xhs-rookies' //错误的方式，不允许采用
this.setState({ name: 'new xhs-rookies' }) //正确的方式

简单点来说，在 react 中页面是通过数据进行渲染，使用setState()更新的数据，react 会帮我们执行render()去更新页面，从而将页面中用到 state 中的数据全部更新。

关于 render

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回很多类型，很多时候我们选择让该方法返回 React 元素，然后交由 React 去渲染展示：

React 元素：

• 通常通过 JSX 创建。

• 例如，

  会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件；

• 无论是

  还是 均为 React 元素。

详细关于 render() 方法的内容请见React.Component - Render)

创建函数组件

函数组件是使用 function 来进行定义的函数，只是这个函数会返回和类组件中 render 函数返回一样的内容。

跟类组件相比，函数组件有自己的特点：

• 没有生命周期，也会被更新并挂载，但是没有生命周期函数；

• 没有 this(组件实例）；

• 没有内部状态（state）；

我们来定义一个函数组件：

export default function App() {
  return 
xhs rookies
}

渲染组件

在前几篇中, 我们只遇到代表 DOM 标签的 React 元素：

const element = 

然而，元素也可以代表用户定义的组件：

const element = 

当 React 遇到一个代表用户定义组件的元素时，它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。

比如, 以下代码在页面上渲染“xhs rookies”：

function Welcome(props) {
  return 
Hello, {props.name}
}

const element = 
ReactDOM.render(element, document.getElementById('root'))

我们简单解释一下上面这个例子:

• 我们调用了 ReactDOM.render() 方法并向其中传入了 元素。

• React 调用 Welcome 组件，并向其中传入了 {name: 'xhs rookies'} 作为 props 对象。

• Welcome 组件返回

  xhs rookies

  。

• React DOM 迅速更新 DOM ，使其显示为

  xhs rookies

  。

注意： 组件名称总是以大写字母开始。

举例来说,

function Welcome(props) {
  return 
Hello, {props.name}
}

function App() {
  return (
    

      
      
      
    
  )
}

 
ReactDOM.render(, document.getElementById('root'))

function Comment(props) {
  return (
    
      
        
        {props.author.name}