有状态组件/无状态组件

组件在使用过程中，需要维护内部状态（state）的为有状态组件（stateful）
反之不需要维护内部状态（state）的为无状态组件（stateless）

函数式组件/类组件

根据组件创建的方式，可以分为类式组件 函数式组件

  1. class HelloWorld extends Component {    //类式组件
  2.   render() {
  3.     return <div>Hello {this.props.name}</div>;
  4.   }
  5. }
  7. function HelloWorld(props) {                                //函数式组件
  8.   return <div>Hello World!{props.name}</div>;
  9. }

受控组件/非受控组件

当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件。
满足下列条件的，则称之为非受控组件

  • 如果一个表单组件没有value props(单选按钮和复选按钮对应的是 checked props)时,就可以称为非受控组件;
  • 使用defaultValue和defaultChecked来表示组件的默认状态
  • 通过 defaultValue和defaultChecked来设置组件的默认值,它仅会被渲染一次,在后续的渲染时并不起作用
    1. <input type="text" value={this.state.value}    //将输入的字母转化为大写展示
    2. onChange={(e) => {
    3.    this.setState({
    4.        value: e.target.value.toUpperCase(),
    5.    });
    6. }}
    7. />
    8. <input type="text" defaultValue={this.state.value}    //直接展示输入的字母
    9. onChange={(e) => {
    10.    this.setState({
    11.        value: e.target.value.toUpperCase(),
    12.    });
    13. }}
    14. />
    15. //要在表单提交时候使用input值 
    16. //受控组件从state取值 state值与展示值一样 
    17. //非受控组件最好通过ref从实际dom取得值 state值与展示值无关

    高阶组件

    高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
    具体而言，高阶组件是参数为组件，返回值为新组件的函数。 ```jsx import React, { Component } from ‘react’; class HelloWorld extends Component { //类式组件 render() { return
    Hello {this.props.name}
    ; } } function withClassHOC(WrappedComponent) { //Props Proxy return class ClassInner extends React.Component { render() { return } } } //高阶组件 默认传入组件 export default withClassHOC(HelloWorld) //高阶组件 供其他组件自定生成组件 export default withClassHOC()

//JSX 使用高阶组件 class Demo extends Component{} let xxComponent = withClassHOC(Demo) //方法1

@withHeader //方法2 export default class Demo extends Component { render() { return (

我是一个普通组件
); } } ```

纯函数

  • 函数的返回结果完全由参数决定
  • 函数不修改参数

    参考

  1. https://www.jianshu.com/p/48f7c1f108f1 组件分类—状态
  2. https://segmentfault.com/a/1190000012962205 受控组件/非受控组件
  3. https://segmentfault.com/a/1190000012404114 受控组件/非受控组件 实例
  4. https://react.docschina.org/docs/higher-order-components.html 高阶组件
  5. https://www.jianshu.com/p/0aae7d4d9bc1 深入理解高阶组件
  6. https://zhuanlan.zhihu.com/p/24776678
  7. https://segmentfault.com/a/1190000010371752