React无状态组件

sen丶晓森

已于 2022-06-15 10:35:19 修改

阅读量460

点赞数

分类专栏： React

于 2022-06-15 10:33:28 首次发布

本文链接：https://blog.csdn.net/XiaoSen207/article/details/125292167

版权

React 无状态组件代码简洁性能优化测试友好

关键词由CSDN通过智能技术生成

React 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了无状态组件在React开发中的优势，包括代码简洁性、无需绑定事件、性能提升以及便于测试。通过对比普通组件，展示了无状态组件如何简化代码结构，提高应用的运行效率，并且易于维护和测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无状态组件优势
（1）.代码整洁、可读性高

普通组件：

import React, { Component,PropTypes } from 'react';
export default class CusImg extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div cLassName={this.props.style}>
      <img src={this.props.imgurl1}/>
  <text cLassName={this.props.textStyle}>{this.props.text)</text>
  </div >);
  }
  }

无状态组件：

import React, { Component, PropTypes } from 'react';
const CusImg = (props) => (
    <div cLassName={props.style}>
        <img src={props.imgurl1}/>
        <text cLassName={props.textStyle}>{props.text}</text>
    </div>
    );
export default CusImg