创新互联React教程：React组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

10年积累的成都网站设计、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有宁化免费网站建设让你可以放心的选择与我们合作。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件与 class 组件

定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) {
  return Hello, {props.name};
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。

这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

你同时还可以使用 ES6 的 class 来定义组件：

class Welcome extends React.Component {
  render() {
    return Hello, {this.props.name};
  }
}

上述两个组件在 React 里是等效的。

渲染组件

之前，我们遇到的 React 元素都只是 DOM 标签：

const element = ;

不过，React 元素也可以是用户自定义的组件：

const element = ;

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

例如，这段代码会在页面上渲染 “Hello, Sara”：

function Welcome(props) {  
    return Hello, {props.name};
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

在 CodePen 上尝试

让我们来回顾一下这个例子中发生了什么：

我们调用 ReactDOM.render() 函数，并传入作为参数。
React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
Welcome 组件将
Hello, Sara
元素作为返回值。
React DOM 将 DOM 高效地更新为
Hello, Sara
。

注意：组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，代表 HTML 的 div 标签，而则代表一个组件，并且需在作用域内使用 Welcome。

组合组件

组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。

按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

例如，我们可以创建一个可以多次渲染 Welcome 组件的 App 组件：

function Welcome(props) {
  return Hello, {props.name};
}

function App() {
  return (
    
              
              
            
    
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

在 CodePen 上尝试

通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。

但是，如果你将 React 集成到现有的应用程序中，你可能需要使用像 Button 这样的小组件，并自下而上地将这类组件逐步应用到视图层的每一处。

提取组件

将组件拆分为更小的组件。

例如，参考如下 Comment 组件：

function Comment(props) {
  return (
    
      
        
        
          {props.author.name}
        
      
      
        {props.text}
      
      
        {formatDate(props.date)}
      
    
  );
}

在 CodePen 上尝试

该组件用于描述一个社交媒体网站上的评论功能，它接收 author（对象），text （字符串）以及 date（日期）作为 props。

该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。因此，让我们从中提取一些组件出来。

首先，我们将提取 Avatar 组件：

function Avatar(props) {
  return (
      );
}

Avatar 不需知道它在 Comment 组件内部是如何渲染的。因此，我们给它的 props 起了一个更通用的名字：user，而不是 author。

我们建议从组件自身的角度命名 props，而不是依赖于调用组件的上下文命名。

我们现在针对 Comment 做些微小调整：

function Comment(props) {
  return (
    
      
                
        
          {props.author.name}
        
      
      
        {props.text}
      
      
        {formatDate(props.date)}
      
    
  );
}

接下来，我们将提取 UserInfo 组件，该组件在用户名旁渲染 Avatar 组件：

function UserInfo(props) {
  return (
          
          
            {props.user.name}          
      
    );
}

进一步简化 Comment 组件：

function Comment(props) {
  return (
    
            
      
        {props.text}
      
      
        {formatDate(props.date)}
      
    
  );
}

在 CodePen 上尝试

最初看上去，提取组件可能是一件繁重的工作，但是，在大型应用中，构建可复用组件库是完全值得的。

根据经验来看，如果 UI 中有一部分被多次使用（Button，Panel，Avatar），或者组件本身就足够复杂（App，FeedStory，Comment），那么它就是一个可复用组件的候选项。

Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。来看下这个 sum 函数：

function sum(a, b) {
  return a + b;
}

这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

相反，下面这个函数则不是纯函数，因为它更改了自己的入参：

function withdraw(account, amount) {
  account.total -= amount;
}

React 非常灵活，但它也有一个严格的规则：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

当前文章：创新互联React教程：React组件
转载注明：http://www.shufengxianlan.com/qtweb/news14/44814.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容