React篇(020)-如何在 React 中创建组件?

2022-05-12 20:42:03 浏览数 (1)

答案:有两种可行的方法来创建一个组件: 1. Function Components: 这是创建组件最简单的方式。这些是纯 JavaScript 函数,接受 props 对象作为第一个参数并返回 React 元素:

代码语言:javascript复制
function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>
}

2. Class Components:你还可以使用 ES6 类来定义组件。上面的函数组件若使用 ES6 的类可改写为:

代码语言:javascript复制
class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

通过以上任意方式创建的组件,可以这样使用:

代码语言:javascript复制
<Greeting message="semlinker"/>

在 React 内部对函数组件和类组件的处理方式是不一样的,如:

代码语言:javascript复制
// 如果 Greeting 是一个函数
const result = Greeting(props); // <p>Hello</p>

// 如果 Greeting 是一个类
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // <p>Hello</p>

阅读资源: 1. [React 如何区分 Class 和 Function?](https://overreacted.io/zh-hans/how-does-react-tell-a-class-from-a-function/)

0 人点赞