本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

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

苏南大叔:react入门教程,react组件的两种写法 - react-component
react入门教程,react组件的两种写法(图4-1)

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

基本背景

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

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

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

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

组件写法一:类似普通函数

和普通函数不一样的地方,就是函数名字首字母一定要大写!

其他的就是return的是jsx的虚拟dom。其他的基本上和普通函数是无异的了。

范例代码如下:

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

苏南大叔:react入门教程,react组件的两种写法 - welcome-code
react入门教程,react组件的两种写法(图4-2)

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

组件写法二:一个继承类

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

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

范例代码如下:

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

苏南大叔:react入门教程,react组件的两种写法 - welcome-code-2
react入门教程,react组件的两种写法(图4-3)

注意:这种类的形式里面,使用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')
);

苏南大叔:react入门教程,react组件的两种写法 - welcome-code-3
react入门教程,react组件的两种写法(图4-4)

如果放在不同的文件里面,就类似下面这样使用:
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')
);

相关链接

总结

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

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

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