react入门教程，react组件的两种写法

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

继续苏南大叔的react系列入门教程，小白专用，高手飘过。本文里，苏南大叔来讲述一下react组件的两种写法。当然，也会附带提一下相关的基础知识props及其它。

本文测试环境：react@17.0.2，react-dom@17.0.2，chrome@89.0.4389.114。另外，本文中的react组件的两种写法，都是比较简写的形式，其实是可以在此基础上再进行扩展的。

基本背景

本文的测试代码是基于create-react-app自动创建的例子，在其基础上进行修改的。所以，如果您要严格复现本文的例子，可以先看看下面这篇文章：

• https://newsn.net/say/react-start.html

本文里面出现了一个新的概念，叫做props。以前的文章里面，苏南大叔没有写过这个概念，但是也很好理解。这里用大白话来描述一下，就是如果把react组件想象成函数的话，props就是要传入函数的参数（入参）。当然，这里并不是描述如何使用props的，所以，这里并不做过多描述。

本文中的两种写法，组件的返回值都是使用jsx这种更新的写法的。所以，理论是来说，是离不开babel的。具体可参考下面这篇文章：

• https://newsn.net/say/react-babel.html

划个重点：代码中的组件名称，一定要首字母大写！首字母大写！首字母大写！否则有可能不被react所识别。这个情况一定要注意！

组件写法一：函数式组件

和普通函数不一样的地方，就是函数名字首字母一定要大写！其次就是return的是jsx的虚拟dom。其他的基本上和普通函数是没有啥差别的。

范例代码如下：

function Welcome(props) {
  return <h1>欢迎{props.name}</h1>;
}

注意：这种函数的形式里面，使用props的办法是：{props. }。

组件写法二：类式组件

这种写法更常见，而且能够挂载很多关键生命周期节点，具体可挂载的节点，请参见后续文章，本文中只使用一个render()方法来输出这个类的结果构成，注意每个合格的组件都要继承自React.Component。

这里，仍然要注意：类名首字母大写！这个是react的规定！不大写的话，就不能识别！

范例代码如下：

class Welcome2 extends React.Component {
  render() {
    return <h1>welcome, {this.props.name}</h1>;
  }
}

注意：这种类的形式里面，使用props的办法是：{this.props. }。

最终代码

如果放在一个文件里面，就类似下面这样使用：

import React from 'react';
import ReactDOM from 'react-dom';

function Welcome(props) {
  return <h1>欢迎{props.name}</h1>;
}

class Welcome2 extends React.Component {
  render() {
    return <h1>welcome, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <div>
    <Welcome name="苏南大叔" />
    <Welcome2 name="uncle sunan" />
  </div>,
  document.getElementById('root')
);

如果放在不同的文件里面，就类似下面这样使用：
welcome.js:

function Welcome(props) {
    return <h1>欢迎{props.name}</h1>;
}
export default Welcome;

welcome2.js:

import React from 'react';
class Welcome2 extends React.Component {
    render() {
        return <h1>welcome, {this.props.name}</h1>;
    }
}
export default Welcome2;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './welcome';
import Welcome2 from './welcome2';

ReactDOM.render(
  <div>
    <Welcome name="苏南大叔" />
    <Welcome2 name="uncle sunan" />
  </div>,
  document.getElementById('root')
);

相关链接

• https://newsn.net/say/react-vs-html.html
• https://newsn.net/say/react-error-git.html
• https://newsn.net/say/react-start.html

总结

在本文中，苏南大叔演示了react组件的两种写法。在实践中，更常见的写法是第二种，继承自类React.Component的写法。而在这个类中，最简单的写法，就是直接输出个render(){}，而其他的生命周期函数都采用默认的。

更多react基础入门教程，请参考苏南大叔的博客：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。