react、antd charts

美旺Link
399 阅读4分钟

背景

学习之前我们先简单了解一下什么是react？

官网上对react的介绍是用于构建用户界面的JavaScript库。 官网链接

  1. 研发团队
    是Facebook 在2013年推出的一款前端框架，react的起源是faceBook的内部项目，由于该公司对市场上所有JavaScript MVC框架都不满意，所以自己写了一套。做出来之后发现还挺好用，就在2013年5月开源了。
  2. 用途
    React主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
  3. 解决了哪些问题
    传统UI操作关注太多细节。而react始终整体“刷新”页面，无需关注太多细节，简化DOM操作。
  4. 框架特点
    1，声明式 2，组件化 3，跨平台

安装

创建一个新的react应用，前提条件 Node >= 14.0.0 和 npm >= 5.6
终端执行

npx create-react-app my-app
cd my-app
npm start

或者

npx create-react-app my-app --template typescript
cd my-app
npm start

知识

state正确使用

构造函数是唯一可以给 this.state 赋值的地方：setState()

阅读到这里的时候发现了2个需要注意的点

  1. state的更新是异步的。
  2. 出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

那问题来了

react 是如何将多个 setState() 合并成一个的呢？ TODO

数据是向下流动的

怎么理解？

我的理解是react可将自己的state通过props的方式传递到子组件中去。这通常会被叫做"单项"的数据流。

官方解释：

如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。

记住两生命周期

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行。

componentWillUnmount()

事件处理

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

状态提升

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。

组合vs继承

组件保函关系，我们通常使用一个特殊的children prop来将他们的子组件渲染到结果中

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。

Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。

注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。

接到上级领导的命令，需要在react中引入antv来支持产品的需求。

antv

学习技术的最佳途径就是阅读官网，打开antv官网以后那问题来了

G2 和 G2Plot 是什么关系？有什么区别？
F2 和 F2Native 是什么关系？有什么区边？
G6 和 Graphin 是...
带着这些问题我们一起去寻找答案，于是我找到了Ant Design Charts。

G2、G2Plot和Ant Design Charts是什么关系？

  • 同样的团队开发。
  • G2Plot基于G2，使用图形语法，使用成本相对较高，功能强大。
  • G2Plot 是 G2 上的覆盖包装器，用配置项替换图形语法。
  • Ant Design Charts 是 G2Plot 的 React 版本，它与 G2Plot - - - 同步功能，并内置了与图形相关的图表，如流程图、组织结构图等
  • 其他一些图表是由其他团队的学生基于 G2 或 G2Plot 实现的

项目技术栈是React，为了快速上手首选的肯定是Ant Design Charts。因为它可以降低学习成本。

介绍

Ant Design Charts 是 G2Plot 的 React 版本，基于 React 封装了 G2Plot，无需感知destroy()、update() 等函数，只需关系 data 和 config，功能和 G2Plot 保持一致

安装

NPM 模式（推荐）

npm install @ant-design/charts

使用

大部分 demos 使用了父容器宽高，请确保父容器宽高或者手动设置图表宽高。

import React from 'react';
import { Line } from '@ant-design/charts';

const Page: React.FC = () => {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ];

  const config = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return <Line {...config} />;
};
export default Page;
avatar
文章
阅读
粉丝