React组件

react组件

1. 概念

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

   • 官方详细组件 API

2. 组件的分类

   • 无状态的函数式组件

     import React from 'react';
     import ReactDOM from 'react-dom';
     
     //组件的名字首字母大写
     function AppHeader() {
         return (
             <div className="header">
                 <h2>头部部分</h2>
             </div>
         )
     }
     
     function AppContent() {
         return (
             <div className="content">
                 <h3>中间内容部分</h3>
             </div>
         )
     }
     
     function AppFooter() {
         return (
             <div className="footer">
                 <h2>尾部部分</h2>
             </div>
         )
     }
     
     const element = (
         <div>
             <AppHeader />
             <AppContent />
             <AppFooter />
         </div>
     )
     
     //==============
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

   • 有参数的函数式组件

     import React from 'react';
     import ReactDOM from 'react-dom';
     
     function AppCom(props) {
         return <h2 className={props.name}>{props.name}</h2>;
     }
     
     const element = (
         <div>
             <AppCom name="header" />
             <AppCom name="content" />
             <AppCom name="footer" />
         </div>
     )
     
     //==============
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

   • class 类组件

     import React from 'react';
     import ReactDOM from 'react-dom';
     
     //class组件类，必须继承自React.Component才是一个组件类，否则就是一个普通的类
     class AppCom extends React.Component {
         //如果子类加入了构造函数 constructor，则一定要手动调用父类的构造函数super()
         constructor(props) {
             super(props);
             //React 组件需要通过手动为组件添加state成员来初始化：ViewMode
             //state等价于Vue中的data,接下来就可以在该组件管理的模板中通过{}来访问绑定数据
             this.state = {
                 message: 'hello world'
             }
         }
         //class组件类，必须通过render函数返回组件模板
         render() {
             return (
                 <div>
                     <h2 className={this.props.name}>{this.props.name}</h2>
                     <div onClick={this.handleClick.bind(this)}>{this.state.message}</div>
                 </div>
             );
         }
         //handleClick方法里面的this默认是window，而不是实例对象，需要通过方法改变这个this的指向
         handleClick(){
             //需要修改state里的数据并且希望视图更新，则一定要使用this.setState方法
             this.setState({
                 message: 'good job'
             })
         }
     }
     
     const element = (
         <div>
             <AppCom name="header" />
             <AppCom name="content" />
             <AppCom name="footer" />
         </div>
     )
     
     //==============
     ReactDOM.render(
         element,
         document.getElementById('root')
     )
     

3. 渲染组件

   • React 元素既可以是 DOM 标签

     const element = <div />;
     

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

     import React from 'react';
     import ReactDOM from 'react-dom';
     
     function AppCom(props) {
         return <h2>{props.name}</h2>;
     }
     
     const element = <AppCom name="header" />;
     
     ReactDOM.render(
       element,
       document.getElementById('root')
     )
     /**
      * 渲染过程：
      * 1.调用 ReactDOM.render() 函数，并传入 <AppCom name="header" /> 作为参数。
      * 2.React 调用 AppCom 组件，并将 {name: 'header'} 作为 props 传入
      * 3.Welcome 组件将 <h2>header</h2> 元素作为返回值
      * 4.React DOM 将 DOM 高效地更新为 <h2>header</h2>
      */
     

4. 组件使用规范

   • 组件名称必须以大写字母开头：React 会将以小写字母开头的组件视为原生 DOM 标签，例如，<div /> 代表 HTML 的 div 标签，而 <AppCom /> 则代表一个组件，并且需在作用域内使用 AppCom

   • 组件可以在其输出中引用其他组件，通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。但是，如果你将 React 集成到现有的应用程序中，你可能需要使用像 Button 这样的小组件，并自下而上地将这类组件逐步应用到视图层的每一处

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

   • 提取组件可能是一件繁重的工作，但是，在大型应用中，构建可复用组件库是完全值得的。如果 UI 中有一部分被多次使用（Button，Panel，Avatar），或者组件本身就足够复杂（App，FeedStory，Comment），那么它就是一个可复用组件的候选项

   • 组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

     //“纯函数”:该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果
     function sum(a, b) {
       return a + b;
     }
     //非纯函数，因为它更改了自己的入参
     function withdraw(account, amount) {
       account.total -= amount;
     }