'假的'必学必会React学习笔记之二

前面一记是对日常小知识点的一些总结，这一记我主要想记录一下关于组件定义、拆分、复用及其属性相关。

• 组件的定义：分为两种方式--函数式和类的方式（现在基本不再用这种方案）

  这里可能很多人会说，怎么就不用类声明方式了，我工作中不是用的好好的么，而且项目中到处都是类组件。据我所知Facebook推出了react16.8版本以来，就引入了hooks,甚至redux作者都挖过去只为一件事。那就是推行函数式编程。满世界的hooks你觉得什么么是趋势。再说了vue的尤大大不也说更新了vue到3.0版本。里面最重要的不也是compositionAPI么。含义上来说就是基本函数式化了。

  哎！忘了一小点，现在补上： 不管是函数式组件还是类组件最后都是返回一个React顶级元素。 React是如何定义，如何渲染的：1. 把所有的属性组合成一个对象；2. 把属性对象作为参数传递给函数组数 ；3. 函数组件会返回一个React元素；4. 然后由ReactDOM.render方法来把虚拟DOM(React元素)转为真实元素并且插到页面中。具体代码可以参照我整理的react基础。

• props属性

  • 这里主要记录一下props的收集

  props 对象是怎么传递给类组件的呢？首先会把props传递给Welcome类得构造函数，new Welcome(props) ,然后获取Welcome类的实例。当调用实力上的render方法进行渲染，获得返回的React元素。然后将此元素渲染到页面中。

  class Welcome extends React.Component {
      constructor(props) {
          super(props)//将props传递给父组件Component
      }
      render() {
          reutrn (
              <h1>
                  hello {this.props.name}
                  <span>world</span>
              </h1>
          )
      }
  }
  
  let element = <Welcome name="this is a component"/>
  ReactDOM.render(element, 'root')
  

  1、createElement的第一个参数是元素的类型，可以是一个字符串，也可以是类组件，也可以是一个函数

  2、 React是通过首字母是否是大写来区分是内置的原生DOM组件(span h1).和自定义组件(都要以大写字母开头)

   <!--The tag <welcome> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter-->
   let element = React.createElement(welcome, { name: "zhufeng" });
  

• 组件的拆分与复用

  如何划分组件的维度或者说粒度.1、太大，组件太复杂，不好易维护；2、太小太细 组件太简单，而且数量会非常的多，也难以管理和维护。

  高内聚，低耦合; 功能要高度内聚，组件和组件之间尽量不要耦合

  什么需要拆分组件:1.组件已经太复杂了，无法管理了; 2.组件需要被复用 ;3. 如何进行组件的拆分和组件; 4. 组件内的数据如何传. 这个讲不清楚只能以一个简单的例子展示一下：

以下是一个面板：
<!--面板头部-->
class PanelHead extends React.Component {
    render() {
        return (
            <div className="panel-heading" style={{ border: `1px solid ${this.props.color}` }}>
                我是面板的头部
            </div>
        )
    }
}
<!--面板身体-->
class PanelBody extends React.Component {
    render() {
        return (
            <div className="panel-body" style={{ border: `1px solid ${this.props.color}` }}>
                我是面板主体部分
            </div>
        )
    }
}
<!--面板底部-->
class PanelFooter extends React.Component {
    render() {
        return (
            <div className="panel-footer" style={{ border: `1px solid ${this.props.color}` }}>
                我是面板的尾部
            </div>
        )
    }
}
<!--各个组件组合为一个完整的面板组件-->
class Panel extends React.Component {
    render() {
        return (
            <div className="panel panel-default" style={{ border: '1px solid red' }}>
                <PanelHead color="red" />
                <PanelBody color="red" />
                <PanelFooter color="red" />
            </div>
        )
    }
}
ReactDOM.render(<panel />, document.getElementById('root'));

• 上面属性该船的也传了，改建的拆分组和也都设计到了，这里还有个别重点话题那就是对于属性的检验工作——属性校验器。

<!--直接上代码效果更好-->
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';//现在组件属性校验器已经变成了一个独立的模块
/**
 *  属性校验
 * 1. 为什么需要属性校验
 * 
 */
class Person extends React.Component {
    static defaultProps = {
        gender: 'male'
    }
    static propTypes = {
        //age: PropTypes.number.isRequired,
        gender: PropTypes.oneOf(['male', 'female']).isRequired,
        hobby: PropTypes.arrayOf(PropTypes.string).isRequired,
        position: PropTypes.shape({
            x: PropTypes.number,
            y: PropTypes.number
        }),
        age: function (props, propName, componentName) {
            if (props.age < 18) {
                throw new Error('你还未成年');
            }
        }
    }
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <td>age</td>
                        <td>gender</td>
                        <td>hobby</td>
                        <td>position</td>
                        <td>friends</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{this.props.age}</td>
                        <td>{this.props.gender}</td>
                        <td>hobby</td>
                        <td>position</td>
                        <td>friends</td>
                    </tr>
                </tbody>
            </table>
        )
    }
}
let personProps = {
    age: 10,//年龄
    //gender: 'male',//性别 male female
    hobby: ['basketball', 'football'],//爱好
    position: { x: 10, y: 10 },//地理坐标
    friends: [{ name: 'hangman', age: 10 }, { name: 'lis', age: -20 }]
}
ReactDOM.render(<Person {...personProps} />, document.getElementById('root'))