React数据流

在 React 中，数据是自顶而下单向流动的，即从父组件到子组件。

React的数据传输主要靠state和props来完成。如果顶层组件初始化 props，那么 React 会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。state 只关心每个组件自己内部的状态，这些状态只能在组件内变化。把组件看成一个函数，那么它接收了 props 作为参数，内部由 state 作为函数的内部参数，返回一个 Virtual DOM 的实现。

state中往往储存一些时刻变化的变量或者后期可能要更新的参数。我们用setState()方法来更新state中的值。

下面是一个计数的例子，通过点击更新按钮，触发setState()方法，使state中的值发生改变。

props往往用来定义一些静态的常量，或者用于父子组件间的通信。props本身是不可变的，当我们试图改变props中的原始值，React会报出类型错误的警告。

SheetJS js-xlsx 是一款能够读写多种格式表格的插件，浏览器支持良好，并且能在多个语言平台上使用

GitHub地址 GitHub - SheetJS/js-xlsx: SheetJS Community Edition -- Spreadsheet Toolkit

    npm install xlsx --save

    如果安装失败，删除packagelock文件，再执行npm相关命令。

    import as XLSXfrom 'xlsx';

onImportExcel = file => {

        let data = [];// 存储获取到的数据

        // 通过FileReader对象读取文件

      const fileReader =new FileReader();

      fileReaderreadAsBinaryString(file);  //二进制

      fileReaderonload = event => {

     try {

                    const {result } = eventtarget;

                // 以二进制流方式读取得到整份excel表格对象

                  const workbook = XLSXread(result, {type:'binary' });

                // 遍历每张工作表进行读取（这里默认只读取第一张表）

                 for (const sheet in workbookSheets) {

                    if (workbookSheetshasOwnProperty(sheet)) {

                        // 利用 sheet_to_json 方法将 excel 转成 json 数据

                      data =dataconcat(XLSXutilssheet_to_json(workbookSheets[sheet]));

                    // break; // 如果只取第一张表，就取消注释这行

        }

}

    consolelog(data);

    }catch (e) {

// 这里可以抛出文件类型错误不正确的相关提示

      consolelog('文件类型不正确');

      return;

    }

 };

}

<FormItem label="报表上传">

    <Upload name="excel" action="" listType="text"  accept="file" beforeUpload={thisonImportExcel}     showUploadList={true}>

    <Button>

        <Icon type="upload" />点击上传报表

    </Button>

    </Upload>

</FormItem>

在前端开发的时候，我们有时候需要验证一些异步请求返回数据后的交互效果，那么就需要搭建一个nodejs服务器来模拟，但是需要自己去在node项目中写比较麻烦，json-server就是快速搭建这样一个node服务器，你只需要创建一个json的文件，然后监听这个文件就可以了

这里我使用yarn本地安装并演示json-server，因为我npm已经有了全局的json-server

终端命令：

现在你已经运行了一个小的服务器，通过向 >

以上就是关于React数据流全部的内容，包括:React数据流、React项目，基于antd读取excel文件、React之模拟数据库json-server 2019-01-26等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！