3分钟教你写精炼的 React Components

zhoutk 发布于2019-08-23 14:59 / 1326人阅读

摘要：最近在做一些梳理，把平时记录的一些笔记和实践整理成完整的短篇技术文章。下一步我们要处理的是样式。相比最初的版本多了一些代码，因为我们把一些关键逻辑拆分到了不同的组件中，干净并不意味着少。

最近在做一些梳理，把平时记录的一些笔记和实践整理成完整的短篇技术文章。这篇主要说一下如何精简你的React Components

看个例子

还是用那个大家都熟悉的 Counter，点一下就能加1的那种。

看看原始代码：

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  handleClick = () => this.setState(state => ({ count: state.count + 1 }));

  handleReset = () => this.setState({ count: 0 });

  render() {
    const { dark } = this.props;
    const theme = dark ? "dark" : "";

    return (
      
        
          {this.state.count}
        
        
      
    );
  }
}

export default Counter;

非常简单的一个组件，点一下就加1，点reaset 就重置为0；还能传参换主题。

回头再看这个组件，发现它虽简单，做的事情却不少，甚至有些臃肿。

在《 Clean Code 》中， Robert Martint 建议函数应该专注于一件事:

A function should do one thing, do it well, and do it only.

显然我们的组件没有遵循这条原则，下面我们就一步步改造成理想的模样：

分离状态管理逻辑

最简单的办法是把状态划分为不同的因子:

import React from "react";


class Counter extends React.Component {
  state = {
    count: 0
  };
  updateCount = val => this.setState({ count: val });
  render() {
    const stateTools = [this.state.count, this.updateCount];
    return this.props.children(stateTools);
  }
}

const Clicker = props => {
  const { dark, onClick, onReset, count } = props;
  const theme = dark ? "dark" : "";
  return (
    
      
        {count}
      
      
      
  );
}

const App = () => {
  return (
    
      {([count, updateCount]) => {
        return (
           updateCount(count + 1)}
            onReset={() => updateCount(0)}
          />
        )
      }}
    
  );
}

export default App;

这样分的一个好处是便于管理，以后不论是 React Hooks, Redux, React.Context, Mobx, Graphql 或者其他什么东西，都可以。

看到这可能会觉得有点眼熟，没错，这是React Render props 的一种形式，可以参考我的上一篇文章.

分离样式

到现在，我们的 Clicker component 还是略显臃肿，继续改。

下一步我们要处理的是样式。

样式是很重要的，一个组件长成什么样子仅仅是实现要关心的事情，而且组件本身也不关心你用了什么样的技术。

废话不多少，我们开始拆：

拆开之后的这种样子，很容易创建styled 的componen, 也方便在其他地方复用。

最终形态

import React from "react";

const PrimaryButton = props =>

结语

经过一番操作，代码变成了我们想要的模样，也干净了很多。

相比最初的版本多了一些代码，因为我们把一些关键逻辑拆分到了不同的组件中，干净并不意味着少。

如果后面需要加入更多的逻辑，改造后的版本显然更灵活，更容易管理。

大概就是这么多，希望对大家有所启发。

如有纰漏，欢迎指正，谢谢。

云服务器 GPU云服务器你写的代码，是别人的 php给时间加3分钟一个教你开发小程序的小程序教你用阿里云开我的世界服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101446.html

手把手教你写 Vue UI 组件库@vue2.0

摘要：手把手教你写组件库最近在研究的实现，发现网上很少有关于插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。手把手教你写 Vue UI 组件库最近在研究 muse-ui 的实现，发现网上很少有关于 vue 插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。笔者结合官方文档，与自己的摸索总结，以最简单的 FlexBox 组件为例子，带大家入门 v...

Keagan 2019-08-20 17:02 评论0 收藏0
手把手教你写vue裁切预览组件

摘要：版本裁切工具，包含预览功能最终效果源码地址第一步先用安装脚手架不会安装的看官网初始化第二步创建文件新建里新建，在配置访问路由具体看源码最终生成的文件结构如下图第三步注册组件引用所有插件导入插件入口文件如果已安装就跳过注册插件全 vue版本裁切工具，包含预览功能最终效果： https://qiuyaofan.github.io/vue-crop-demo/ 源码地址： https:/...

FreeZinG 2019-08-22 17:02 评论0 收藏0
【React进阶系列】从零开始手把手教你实现一个Virtual DOM（一）

摘要：可实际上并不是创造的，将这个概念拿过来以后融会贯通慢慢地成为目前前端最炙手可热的框架之一。则是将再抽象一层生成的简化版对象，这个对象也拥有上的一些属性，比如等，但它是完全脱离于浏览器而存在的。所以今天我要手把手教大家怎么从零开始实现。假如你的项目使用了React，你知道怎么做性能优化吗？你知道为什么React让你写shouldComponentUpdate或者React.PureCo...

PumpkinDylan 2019-08-22 16:40 评论0 收藏0
由浅入深地教你开发自己的 React Router v4

摘要：也就是说通过我们自己构建来解释是否是一个合适的路由抽象。首先，并不需要，因为如果路由中没有给那么将会自动渲染。基本上我们的路由只要关心的变化并且返回相应的即可。为了解决这个问题，需要跟踪每一条并且当路由发生改变的时候调用。 showImg(https://segmentfault.com/img/remote/1460000008803951?w=800&h=615); 作者：Tyl...

alin 2019-08-20 15:39 评论0 收藏0