react组件（react一个页面多个组件、如何分批渲染,优先可视化范围内的）

本文目录

• react一个页面多个组件、如何分批渲染,优先可视化范围内的
• React 组件的何处发起 Ajax 请求
• React的对象式组件，以及泛型组件的应用
• react 组件公共逻辑抽离
• React 实现组件拖拽功能
• 更加「轻量」和「快速」的基于React的组件库——SHINEOUT
• react安装组件命令
• react-rnd
• antd的图标不能加点击事件吗

react一个页面多个组件、如何分批渲染,优先可视化范围内的

具体实现方法如下：1、使用React.lazy()和Suspense组件：React.lazy()是React16.6版本中引入的新特性，可以实现动态加载组件。通过React.lazy()可以将组件按需加载，只有在组件被访问时才会加载。可以使用Suspense组件来实现组件的异步加载和占位符的显示。2、使用react-virtualized库：react-virtualized是一款用于渲染大型列表和表格的库，可以实现只渲染可视化区域内的组件，其他组件则以占位符的形式显示。当用户滚动页面时，react-virtualized会重新渲染可视化区域内的组件。3、使用IntersectionObserverAPI：IntersectionObserverAPI是一款用于检测元素是否可见的API，其可以实现只渲染可视化区域内的组件。当用户滚动页面时，IntersectionObserverAPI会检测哪些组件进入可视化区域，然后再进行渲染。

React 组件的何处发起 Ajax 请求

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

React的对象式组件，以及泛型组件的应用

下面分几个步骤来实现上面 Form.Item 形式的组件

上面就是一个简单的react组件封装以及使用，要实现组件式，其实很简单， 把封装的组件放在一个对象中就可以实现

使用的时候，就可以按预期效果来用了

是不是很简单。 这其实是得益于ReactJSX的语法，在reactjsx语法中一切皆对象，同时也一切皆组件，所以就有了上面的组件写法。

接着上面的组件，写一个新的组件 TestB

这个组件的 name 属性都是指定了传参格式，如果想不指定，而是想通过传入参数的类型去推导实际类型，这就用到泛型。

如果这个组件想用到泛型，也就是标题所说的 泛型组件 ，其实也很简单

想上面一样，只要给组件 TestB 一个类型参数，后面用到的同一个类型变量，就会根据传入的参数类型自动推导，这就是泛型。

怎么样，是不是很简单。 如果不理解的人，刹时间看到 《Test.TestB《TestType》 {...props} /》 这种写法多少会有点懵，看完这边文章应该多少能理解一些了。

上面就是本文 对象组件 以及 泛型组件 的实现。 前者容易理解所以无需多说，但是对于泛型，组合使用的好，对于封装特别是高阶组件的封装能够起到很强大的类型约束效果，而本文只是浅显的应用。 无规矩不成方圆，使用 TS 尽管过程会显得麻烦，并且会显著增加工作量，但是习惯了甚至是得心应手的时候，这绝对是日常开发上的一大助力。

react 组件公共逻辑抽离

react 组件公共逻辑抽离方式，主要为： HOC(Higher-order component) ，它不是 react 的API，也不是一种功能，而是一种模式（也可以说是类工厂模式的应用），它是 react 组件进阶的一种写法，本质上是一个方法，接收一个组件，然后对这个组件进行加工，再输出加工后的组件。 HOC组件可以有两种实现方式： 正向代理的HOC 和 反向继承的Render props HOC 效果如下： HOC组件，本质上是一个方法，对组件 MyComponent 进行加工后输出加工后的组件 HOCComponent(MyComponent) ，这个加工过程会把加工的属性传给要用到的组件； Render Props呢，就跟HOC组件相比，它依然是把加工过程抽离出来，但不是在HOC组件内部渲染被加工的组件，而在将加工的状态通过 this.props.render 方式来反向返回给被加工的组件继承使用 下面还是以例子来说明： 效果如下： 两个方式都是可以实现HOC的，在使用的时候选择自己熟悉的就可以了

React 实现组件拖拽功能

  HTML5原生支持拖拽功能，没有看过相关文档，恰好自己想实现一下React组件的拖拽，在网上看了一些文章之后再结合自己的思考实现了一个简陋的圆形，感觉性能不是很好。/** * Created by w on 2018/3/16. */ import Reactfrom ’react’; import ReactDOMfrom ’react-dom’; import ’./dragImg.css’; class DragImgextends React.Component { constructor(props) { super(props); this.state = { cursor:’pointer’, relativeX:0, relatveY:0, isDragging:false         }; this.handleMouseEnter =this.handleMouseEnter.bind(this); this.handleMouseLeave =this.handleMouseLeave.bind(this); this.handleMouseDown =this.handleMouseDown.bind(this); this.handleMouseUp =this.handleMouseUp.bind(this); this.handleMouseMove =this.handleMouseMove.bind(this); } componentDidMount() { let node =this.refs.dragPanel; node.style.left =’50px’; node.style.top =’50px’; } handleMouseEnter(e) { this.setState({ cursor:’cursor’         }) } handleMouseLeave(e) { this.setState({ isDragging:false         }) } handleMouseDown(e) { this.setState({ isDragging:true         }) } handleMouseUp(e) { console.log(this.state.isDragging); this.setState({ relativeX:0, relativeY:0, isDragging:false         }) } handleMouseMove(e) { let node =this.refs.dragPanel; this.setState({ cursor:’move’, relativeX: e.clientX -node.offsetLeft, relativeY: e.clientY -node.offsetTop, }); if (this.state.isDragging) { node.style.left = e.pageX -this.state.relativeX +’px’; node.style.top = e.pageY -this.state.relativeY +’px’; } } render() { return                     onMouseEnter={this.handleMouseEnter}                    onMouseLeave={this.handleMouseLeave}                    onMouseDown={this.handleMouseDown}                    onMouseUp={this.handleMouseUp}                    onMouseMove={this.handleMouseMove}                    ref="dragPanel" style={{’cursor’:this.state.cursor}}》 } } ReactDOM.render(,document.getElementById(’root’));+ e.clientX,e.clientY和e.pageX,e.PageY的区别是算不算上滚动条

更加「轻量」和「快速」的基于React的组件库——SHINEOUT

依据文档介绍，SHINEOUT是一个更加轻量、更加快速的React组件库，在日常的中后端系统中，表格往往扮演着加载展示数据的角色，但同时，当数据量大的时候，可能会遇到性能瓶颈，界面往往会卡顿，一般情况下我们可以使用虚拟加载技术，在之前文章中也介绍过，但有时候可能会有一定的局限性。而SHINEOUT可能会给你提供一个更加优秀的解决方案，提供简单实用的表格组件，性能优秀自适应等。在相关文档中，有对shineout的一系列介绍，包括webpack配置、主体、css模块、结合creat-react-app、babel的配置以及国际化I18N等 通过截图的方式对其组件进行一个简单的预览，通常一个组件库所包含的就是我们日常所使用的组件，SHINEOUT也不例外： Button 内置了几种常用的类型，分为默认(default), 主要(primary), 次要(secondary), 成功(success), 警告(warning), 危险(danger)和链接(link)TreeSelect 用来选择树形数据结构，若需要非关联树形结构选择可使用 Select(treeData)支持上传图片、上传校验、大小限制、异常处理、恢复删除、拖拽上传等功能轮播组件内置三种效果，同时提供自定义的方式SHINEOUT比较优秀的地方就在于它在性能上的优势，Table内部对大量数据的渲染做了lazy render的优化。这个例子加载了10000条，55列数据。可以通过设置rowsInView调整单次最多render的行数，默认为20它的模态框还是比较人性化的，不仅仅是弹出框，同时还支持上下左右的滑出，支持多层等以上是对其部分组件进行一个简单的预览，已经有些兴趣的小伙伴可以到Github上进行查看，效果更佳! 浏览器兼容性最低兼容到IE10，支持所有的主流浏览器，如下：用惯了大厂如阿里的Ant Design又或是MATERIAL-UI等，有时候不妨尝试一番小众产物，或许在众多花草中找到一个灵感，不管是React还是Vue，前端的发展总是一直在更新迭代，学习总是不会错的！

react安装组件命令

react安装组件命令全局安装create-react-app，执行：npminstall-gcreate-react-app命令进行安装。进入要安装项目的文件夹，执行：npxcreate-react-appreact-blog创建一个react-blog项目。进入项目cdreact-blog，执行：npmrunstart编译启动项目即可此页面会自动开启。在项目src目录创建views文件夹，放置页面组件，这里创建了login和main两个文件夹并创建了对应的。

react-rnd

react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。开始调整大小时调用 组件调整大小时调用 组件停止调整大小时调用 组件开始拖拽时调用 组件拖拽时调用 组件停止拖拽时调用

antd的图标不能加点击事件吗

能。antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。在antd中能对图标加点击事件，需要运用click：（）操作，使用console语句即可显示加上的点击事件了。