从零开始学习 React 高阶组件

时间  2019-11-07
标签 开始 学习 react 高阶 组件 栏目 React 繁體版
原文   原文链接

0一、介绍

  • React 高阶组件也叫作 React HOC(High Order Component), 它是react中的高级技术, 用来重用组件逻辑。
  • 但高阶组件自己并非React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。
  • 那么在学习高阶组件以前有一个概念咱们必须清楚，就是高阶函数。

0二、高阶函数

  • 概念：高阶函数是一个函数，它接收函数做为参数或将函数做为输出返回

  • 举个栗子:react

    • 接收函数做为参数webpack

      function a(x) {
  x();
}
function b() {
  alert('hello');
}

a(b);

    • 将函数做为输出返回git

      function a() {
  function b() {
    alert('hello');
  }
  return b;
}

a()();

  • 以上函数a就是一个高阶函数, 用法很是简单, 那么实际开发中又有哪些是高阶函数呢？es6

    • Array 的 map 、reduce 、filter 等方法
    • Object 的 keys 、values 等方法

0三、高阶组件

  • 概念：高阶组件就是一个函数，且该函数接受一个组件做为参数，并返回一个新的组件

  • 举个栗子：github

    // WrappedComponent 就是传入的包装组件
function withHoc(WrappedComponent) {
  return class extends Component {
    render () {
      return (
        <WrappedComponent />
      )
    }
  }
}
  • withHoc 函数就是一个高阶组件。那么高阶组件到底有什么神奇的魔力，值得咱们为之着迷？
  • 开发组件时，咱们会遇到相同的功能，使用高阶组件则能减小重复代码

0四、高阶组件实训1

  • 目的: 定义高阶组件

  • 组件 Login -- 登录页面web

    // 受控组件
class Login extends Component {
  state = {
    username: '',
    password: ''
  }
  
  onUsernameChange = (e) => {
    this.setState({username: e.target.value});
  }
  
  onPasswordChange = (e) => {
    this.setState({password: e.target.value});
  }
  
  login = (e) => {
    // 禁止默认事件
    e.preventDefault();
    // 收集表单数据
    const { username, password } = this.state;
    alert(`用户名: ${username}, 密码: ${password}`);
  }
  
  render () {
    const { username, password } = this.state;
    return (
      <div>
        <h2>登录</h2>
        <form onSubmit={this.login}>
          用户名: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
          密码: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
          <input type="submit" value="登录"/>
        </form>
      </div>
    )
  }
}

  • 组件 Register -- 注册页面npm

    // 受控组件
class Register extends Component {
  state = {
    username: '',
    password: '',
    rePassword: ''
  }
  
  onUsernameChange = (e) => {
    this.setState({username: e.target.value});
  }
  
  onPasswordChange = (e) => {
    this.setState({password: e.target.value});
  }
  
  onRePasswordChange = (e) => {
    this.setState({rePassword: e.target.value});
  }
  
  register = (e) => {
    // 禁止默认事件
    e.preventDefault();
    // 收集表单数据
    const { username, password, rePassword } = this.state;
    alert(`用户名: ${username}, 密码: ${password}, 确认密码: ${rePassword}`);
  }
  
  render () {
    const { username, password, rePassword } = this.state;
    return (
      <div>
        <h2>注册</h2>
        <form onSubmit={this.register}>
          用户名: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
          密码: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
          确认密码: <input type="password" name="rePassword" value={rePassword} onChange={this.onRePasswordChange}/> <br/>
          <input type="submit" value="注册"/>
        </form>
      </div>
    )
  }
}
  • 页面效果

  • 咱们发现里面重复逻辑实在太多了，尤为是 onXxxChange 函数出现太多，咱们先优化一下。json

    // 咱们以 Register 组件为例来看
class Register extends Component {
  state = {
    username: '',
    password: '',
    rePassword: ''
  }
  // 最终修改状态数据的函数
  onChange = (stateName, stateValue) => {
    this.setState({[stateName]: stateValue});
  }
  // 高阶函数 --> 这样后面就能一直复用当前函数，而不用从新建立了~
  composeChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  }
  // 统一全部提交表单函数名
  handleSubmit = (e) => {
    e.preventDefault();
    const { username, password, rePassword } = this.state;
    alert(`用户名: ${username}, 密码: ${password}, 确认密码: ${rePassword}`);
  }
  
  render () {
    const { username, password, rePassword } = this.state;
    return (
      <div>
        <h2>注册</h2>
        <form onSubmit={this.handleSubmit}>
          用户名: <input type="text" name="username" value={username} onChange={this.composeChange('username')}/> <br/>
          密码: <input type="password" name="password" value={password} onChange={this.composeChange('password')}/> <br/>
          确认密码: <input type="password" name="rePassword" value={rePassword} onChange={this.composeChange('rePassword')}/> <br/>
          <input type="submit" value="注册"/>
        </form>
      </div>
    )
  }
}

  • 如今两个页面都有 onChange 、 composeChange 、handleSubmit 函数和相关的状态，咱们接下来提取，封装成高阶组件！promise

    // 高阶组件 withHoc
export default function withHoc(WrappedComponent) {
  return class extends Component {
    state = {
      username: '',
      password: '',
      rePassword: ''
    }
  
    onChange = (stateName, stateValue) => {
      this.setState({[stateName]: stateValue});
    }
  
    composeChange = (name) => {
      return (e) => this.onChange(name, e.target.value);
    }
    
    handleSubmit = (e) => {
      e.preventDefault();
      const { username, password, rePassword } = this.state;
      if (rePassword) {
        alert(`用户名: ${username}, 密码: ${password}, 确认密码: ${rePassword}`);
      } else {
        alert(`用户名: ${username}, 密码: ${password}`);
      }
    }
    
    render () {
      // 抽取方法
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      // 将状态数据和操做的方法以 props 的方式传入的包装组件中
      return (
        <div>
          {/*提取公共头部*/}
          <h2>xxx</h2>
          <WrappedComponent {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

// 组件 Register
class Register extends Component {
  render () {
    const { handleSubmit, composeChange, username, password, rePassword } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        用户名: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
        密码: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
        确认密码: <input type="password" name="rePassword" value={rePassword} onChange={composeChange('rePassword')}/> <br/>
        <input type="submit" value="注册"/>
      </form>
    )
  }
}
// 向外暴露的是高阶组件的返回值~包装了 Register 组件返回了一个新组件
export default withHoc(Register);
  • 如今咱们提取了公共方法、状态等数据, 封装了一个基本的高阶组件。 可是还有不少须要问题须要解决，如今开始行动~

0五、高阶组件实训2

  • 目的: 向高阶组件中传参

  • 修改高阶组件babel

    // 再次包裹了一层高阶函数, 这个高阶函数执行后返回值才是高阶组件
// 经过这种方式, 高阶组件内部就能获取参数了~
export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    ...重复代码省略...
    
    render () {
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      return (
        <div>
          {/*获取到参数值就能正常显示了~*/}
          <h2>{title}</h2>
          <WrappedComponent {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

  • 在 Login / Register 组件中使用

    • export default withHoc('登录')(Login);
    • export default withHoc('注册')(Register);

0六、高阶组件实训3

  • 目的: 获取父组件传递的 props

  • 修改 App 组件

    class App extends Component {
  render() {
    return (
      <div>
        {/*父组件向子组件传递属性*/}
        <Login name="jack" age={18}/>
        <Register />
      </div>
    );
  }
}

  • 修改高阶组件

    export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    ...重复代码省略...
    
    render () {
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      return (
        <div>
          {/*获取到参数值就能正常显示了~*/}
          <h2>{title}</h2>
          {/* 将当前组件接受到的props传给包装组件~*/}
          <WrappedComponent {...this.props} {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

  • Login 组件中使用

    class Login extends Component {
   render () {
     const { handleSubmit, composeChange, username, password, name, age } = this.props;
     return (
       <div>
         <p>你的名字: {name}</p>
         <p>你的年龄: {age}</p>
         <form onSubmit={handleSubmit}>
           用户名: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
           密码: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
           <input type="submit" value="登录"/>
         </form>
       </div>
     )
   }
 }

0七、高阶组件实训4

  • 目的: 修改在 React-devtool 中高阶组件名称，方便调试

  • 修改高阶组件

    export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    // 定义静态方法，修改组件在调试工具中显示的名称
    static displayName = `Form(${getDisplayName(WrappedComponent)})`
    
    ...省略重复代码...
  }
}
// 获取包装组件的displayName的方法
function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
  • 修改以前名称

  • 修改以后名称

0八、使用装饰器

  • 目的: 简化使用高阶组件

  • 下载包

    • npm i react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

  • 在项目根目录配置 config-overrides.js

    const { override, addDecoratorsLegacy } = require('customize-cra');
// 修改 create-react-app 的 webpack 的配置
module.exports = override(
  addDecoratorsLegacy()
)

  • 修改 package.json 的 scripts

    // 将 react-scripts 修改成 react-app-rewired
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
},
  • 以上就是使用 decorator 的配置，修改完后就能使用了~

  • 修改 Login 组件

    @withHoc('登录')
class Login extends Component {
  ...省略重复代码...
}
export default Login;

  • 修改 Register 组件

    @withHoc('注册')
class Register extends Component {
  ...省略重复代码...
}
export default Register;
  • react-app-rewired customize-cra 是 create-react-app 2.0以上专门用来修改 webpack 的配置
  • decorator 还能作不少事，感兴趣朋友能够看看 阮一峰ES6教程 了解更多
重复代码永远是咱们须要考虑处理的代码，因此咱们有模块化、组件化、工具类函数等等，
在 React 中再次引入了一个高阶组件的概念，都是为了去除掉万恶的重复代码，让咱们代码变得更加精简。
本篇文章全部源码都放在了 git仓库，若是它对你有帮助的话，欢迎点 star ~~
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程