Components make life easier（组件复用让生活更美好）

最新推荐文章于 2025-12-03 23:18:51 发布

原创最新推荐文章于 2025-12-03 23:18:51 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react component #props #react #components #react组件

React 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了React中组件的概念，包括Function Components和Class Components的写法，Props的读取方式，以及组件如何通过Props接受输入并返回描述屏幕显示的React元素。同时，文章详细分析了组件从渲染到页面的过程，以及组件如何被组合使用。

Components and Props

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Component的两种写法：

// Function Components
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// => 等价于下面写法

// Class Components
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

渲染Component的机制

官网例子：
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
```
分析component的渲染到页面上的过程：
1. we call ReactDOM.render() the <Welcome name="Sara" /> element.
2. React calls the Welcome component with {name: 'Sara'} as the props.
3. Our Welcome component returns a Hello, Sara element as the result
4. React DOM efficiently updates the DOM to match Hello, Sara.
Components可以组合使用

Components可以组合使用，也可以将常用部分提取出来作为components