mirror of
https://github.com/wu736139669/ASHEBShop-h5.git
synced 2026-08-05 05:55:36 +00:00
234 lines
19 KiB
Markdown
234 lines
19 KiB
Markdown
[<img src="https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png" alt="React virtualized" data-canonical-src="https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png" width="330" height="100" />](http://bvaughn.github.io/react-virtualized/)
|
|
|
|
|
|
|
|
|
|
|
|
[](https://circleci.com/gh/bvaughn/react-virtualized)
|
|
[](https://codecov.io/github/bvaughn/react-virtualized)
|
|
[](https://react-virtualized.now.sh)
|
|
[](#backers)
|
|
[](#sponsors)
|
|
|
|
React components for efficiently rendering large lists and tabular data.
|
|
Check out [the demo](https://bvaughn.github.io/react-virtualized/) for some examples.
|
|
Join the official Slack chat at [react-virtualized.now.sh](https://react-virtualized.now.sh/).
|
|
|
|
### Sponsors
|
|
The following wonderful companies have sponsored react-virtualized:
|
|
|
|
<a href="https://www.treasuredata.com/"><img width="64" height="64" title="Treasure Data" src="https://cloud.githubusercontent.com/assets/29597/17391516/962647f8-59cb-11e6-83be-aa1bac299dd0.png"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/0/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/1/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/2/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/3/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/4/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/5/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/6/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/7/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/8/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/9/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/10/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/10/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/11/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/11/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/12/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/12/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/13/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/13/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/14/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/14/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/15/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/15/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/16/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/16/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/17/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/17/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/18/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/18/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/19/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/19/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/20/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/20/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/21/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/21/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/22/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/22/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/23/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/23/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/24/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/24/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/25/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/25/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/26/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/26/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/27/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/27/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/28/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/28/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/sponsor/29/website" target="_blank"><img src="https://opencollective.com/react-virtualized/sponsor/29/avatar.svg"></a>
|
|
|
|
[Learn more about becoming a sponsor!](https://opencollective.com/react-virtualized#sponsor)
|
|
|
|
<a href="https://opencollective.com/react-virtualized/backer/0/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/0/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/1/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/1/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/2/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/2/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/3/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/3/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/4/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/4/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/5/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/5/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/6/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/6/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/7/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/7/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/8/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/8/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/9/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/9/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/10/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/10/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/11/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/11/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/12/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/12/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/13/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/13/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/14/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/14/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/15/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/15/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/16/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/16/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/17/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/17/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/18/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/18/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/19/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/19/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/20/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/20/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/21/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/21/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/22/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/22/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/23/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/23/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/24/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/24/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/25/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/25/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/26/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/26/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/27/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/27/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/28/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/28/avatar.svg"></a>
|
|
<a href="https://opencollective.com/react-virtualized/backer/29/website" target="_blank"><img src="https://opencollective.com/react-virtualized/backer/29/avatar.svg"></a>
|
|
|
|
Getting started
|
|
---------------
|
|
|
|
Install `react-virtualized` using npm.
|
|
|
|
```shell
|
|
npm install react-virtualized --save
|
|
```
|
|
|
|
ES6, CommonJS, and UMD builds are available with each distribution.
|
|
For example:
|
|
|
|
```js
|
|
// Most of react-virtualized's styles are functional (eg position, size).
|
|
// Functional styles are applied directly to DOM elements.
|
|
// The Table component ships with a few presentational styles as well.
|
|
// They are optional, but if you want them you will need to also import the CSS file.
|
|
// This only needs to be done once; probably during your application's bootstrapping process.
|
|
import 'react-virtualized/styles.css'
|
|
|
|
// You can import any component you want as a named export from 'react-virtualized', eg
|
|
import { Column, Table } from 'react-virtualized'
|
|
|
|
// But if you only use a few react-virtualized components,
|
|
// And you're concerned about increasing your application's bundle size,
|
|
// You can directly import only the components you need, like so:
|
|
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
|
|
import List from 'react-virtualized/dist/commonjs/List'
|
|
```
|
|
|
|
You can also use a global-friendly UMD build:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="path-to-react-virtualized/styles.css">
|
|
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>
|
|
```
|
|
|
|
Now you're ready to start using the components.
|
|
You can learn more about which components react-virtualized has to offer [below](#documentation).
|
|
|
|
Dependencies
|
|
---------------
|
|
|
|
React Virtualized has very few dependencies and most are managed by NPM automatically.
|
|
However the following peer dependencies must be specified by your project in order to avoid version conflicts:
|
|
[`react`](https://www.npmjs.com/package/react),
|
|
[`react-dom`](https://www.npmjs.com/package/react-dom).
|
|
NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.
|
|
|
|
Pure Components
|
|
---------------
|
|
|
|
By default all react-virtualized components use [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html) to avoid re-rendering unless props or state has changed.
|
|
This ocassionally confuses users when a collection's data changes (eg `['a','b','c']` => `['d','e','f']`) but props do not (eg `array.length`).
|
|
|
|
The solution to this is to let react-virtualized know that something external has changed.
|
|
This can be done a couple of different ways.
|
|
|
|
###### Pass-thru props
|
|
|
|
The `shallowCompare` method will detect changes to any props, even if they aren't declared as `propTypes`.
|
|
This means you can also pass through additional properties that affect cell rendering to ensure changes are detected.
|
|
For example, if you're using `List` to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change.
|
|
However you can pass through the additional sort property to trigger a re-render.
|
|
For example:
|
|
|
|
```js
|
|
<List
|
|
{...listProps}
|
|
sortBy={sortBy}
|
|
/>
|
|
```
|
|
|
|
###### Public methods
|
|
|
|
`Grid` and `Collection` components can be forcefully re-rendered using [`forceUpdate`](https://facebook.github.io/react/docs/component-api.html#forceupdate).
|
|
For `Table` and `List`, you'll need to call [`forceUpdateGrid`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#forceupdategrid) to ensure that the inner `Grid` is also updated.
|
|
|
|
Documentation
|
|
---------------
|
|
|
|
API documentation available [here](docs/README.md).
|
|
|
|
There are also a couple of how-to guides:
|
|
* [Customizing classes and styles](docs/customizingStyles.md)
|
|
* [Displaying items in reverse order](docs/reverseList.md)
|
|
* [Using AutoSizer](docs/usingAutoSizer.md)
|
|
* [Creating an infinite-loading list](docs/creatingAnInfiniteLoadingList.md)
|
|
* [Natural sort Table](docs/tableWithNaturalSort.md)
|
|
|
|
|
|
Examples
|
|
---------------
|
|
|
|
Examples for each component can be seen in [the documentation](docs/README.md).
|
|
|
|
Here are some online demos of each component:
|
|
|
|
* [ArrowKeyStepper](https://bvaughn.github.io/react-virtualized/#/components/ArrowKeyStepper)
|
|
* [AutoSizer](https://bvaughn.github.io/react-virtualized/#/components/AutoSizer)
|
|
* [CellMeasurer](https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer)
|
|
* [Collection](https://bvaughn.github.io/react-virtualized/#/components/Collection)
|
|
* [ColumnSizer](https://bvaughn.github.io/react-virtualized/#/components/ColumnSizer)
|
|
* [Grid](https://bvaughn.github.io/react-virtualized/#/components/Grid)
|
|
* [InfiniteLoader](https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader)
|
|
* [List](https://bvaughn.github.io/react-virtualized/#/components/List)
|
|
* [Masonry](https://bvaughn.github.io/react-virtualized/#/components/Masonry)
|
|
* [MultiGrid](https://bvaughn.github.io/react-virtualized/#/components/MultiGrid)
|
|
* [ScrollSync](https://bvaughn.github.io/react-virtualized/#/components/ScrollSync)
|
|
* [Table](https://bvaughn.github.io/react-virtualized/#/components/Table)
|
|
* [WindowScroller](https://bvaughn.github.io/react-virtualized/#/components/WindowScroller)
|
|
|
|
And here are some "recipe" type demos:
|
|
* [Collapsable tree view](https://rawgit.com/bvaughn/react-virtualized/master/playground/tree.html)
|
|
* [Full-page grid (spreadsheet)](https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html)
|
|
* [Dynamic cell measuring](https://rawgit.com/bvaughn/react-virtualized/master/playground/chat.html)
|
|
* [Cell hover effects](https://rawgit.com/bvaughn/react-virtualized/master/playground/hover.html)
|
|
|
|
Supported Browsers
|
|
---------------
|
|
react-virtualized aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported).
|
|
|
|
If you find a browser-specific problem, please report it along with a repro case. The easiest way to do this is probably by forking [this Plunker](https://plnkr.co/edit/6syKo8cx3RfoO96hXFT1).
|
|
|
|
Friends
|
|
---------------
|
|
Here are some great components built on top of react-virtualized:
|
|
* [react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar): Infinite scrolling date-picker with localization, themes, keyboard support, and more
|
|
* [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc): Higher-order components to turn any list into an animated, touch-friendly, sortable list
|
|
* [react-sortable-tree](https://github.com/fritz-c/react-sortable-tree): Drag-and-drop sortable representation of hierarchical data
|
|
* [react-virtualized-checkbox](https://github.com/emilebres/react-virtualized-checkbox): Checkbox group component with virtualization for large number of options
|
|
* [react-virtualized-select](https://github.com/bvaughn/react-virtualized-select): Drop-down menu for React with windowing to support large numbers of options.
|
|
|
|
Contributions
|
|
------------
|
|
|
|
Use [GitHub issues](https://github.com/bvaughn/react-virtualized/issues) for requests.
|
|
|
|
I actively welcome pull requests; learn how to [contribute](https://github.com/bvaughn/react-virtualized/blob/master/CONTRIBUTING.md).
|
|
|
|
Changelog
|
|
---------
|
|
|
|
Changes are tracked in the [changelog](https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md).
|
|
|
|
License
|
|
---------
|
|
|
|
*react-virtualized* is available under the MIT License.
|