React03 组件 & Props

组件 & Props

  • [React 组件](#React 组件)
    • [函数( Function )组件](#函数( Function )组件)
    • [类( Class )组件](#类( Class )组件)
  • Props
    • [将 props 传递给子组件](#将 props 传递给子组件)
    • [在子组件中读取 props](#在子组件中读取 props)
    • [给 prop 指定一个默认值](#给 prop 指定一个默认值)
    • [使用 JSX 展开语法传递 props](#使用 JSX 展开语法传递 props)

React 组件

组件本质上就是类和函数,但是与常规的类和函数不同的是,组件承载了渲染视图的 UI 和更新视图的 setStateuseState 等方法。React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。

因此,函数与类上的特性在 React 组件上同样具有,比如原型链,继承,静态属性等,所以不要把 React 组件和类与函数独立开来。

函数( Function )组件

接收唯一带有数据的 props 对象与并返回一个 React 元素

函数式组件定义时首字母必须大写

render渲染时必须使用标签

js 复制代码
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

类( Class )组件

类组件必须继承React.Component

必须写render函数

必须有返回值

js 复制代码
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件,从而将一些信息传递给它。

将 props 传递给子组件

js 复制代码
export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

在子组件中读取 props

js 复制代码
function Avatar({ person, size }) {
  // 在这里 person 和 size 是可访问的
}

给 prop 指定一个默认值

js 复制代码
function Avatar({ person, size = 100 }) {
  // ...
}

使用 JSX 展开语法传递 props

有时候,传递 props 会变得非常重复:

js 复制代码
function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

重复代码没有错(它可以更清晰)。但有时你可能会重视简洁。一些组件将它们所有的 props 转发给子组件,正如 Profile 转给 Avatar 那样。因为这些组件不直接使用他们本身的任何 props,所以使用更简洁的"展开"语法是有意义的:

js 复制代码
function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

这会将 Profile 的所有 props 转发到 Avatar,而不列出每个名字。

相关推荐
前端小巷子14 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia27 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.30 分钟前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia40 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd1 小时前
3种XSS攻击简单案例
前端·xss
盖头盖1 小时前
【xss基本介绍】
前端·xss
一枚前端小能手1 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖1 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript