React 解决 “cross-cutting concerns” 问题

在React 官方文档中描述render prop 时，是为了解决横切关注问题“cross-cutting concerns”。“cross-cutting concerns”指的是两个非常不一样的组件存在一些类似的功能。对于“cross-cutting concerns” 问题，React 给出了三种解决方案来复用类似功能：

1）Minxs：解决部分method类似问题，但是已被弃用，ES6 的class 不支持该属性，只有在使用插件createReactClass时可使用，存在大量的负面影响，官方已不推荐使用。（https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html）

2）HOC：高阶组件模式是React官方推荐用来取代Minxs解决“cross-cutting concerns” 问题的方案。将类似功能写在高阶组件内，差异化的功能各自封装在不同的基础组件。使用时根据需求，将基础组件作为参数传给高阶组件生成函数，返回该基础组件的高阶组件，一般这个高阶组件会向基础组件中添加一些新的props。

3）Render Prop：这是一种模式，用来解决部分UI类似的问题。通过props传递一个返回React Element的函数给组件，组件在render时调用这个函数并将返回的React Element插入组件。这个功能与Vue的内容分发slot 功能一样。可以有多个，可以接受组件的参数。一般在开发容器组件时，是非常需要的一个特性。例如开发一个资源位容器组件，资源位的数据获取都是公共逻辑，但是渲染时根据资源类型不一样，展示方式会不同，这时可以使用 render prop 定制自己的展示方式。Render Prop 模式可以直接使用children 属性作为prop，这时可以直接利用JSX的“Functions as Children” 特性，不使用显示的prop属性，直接将函数写在children中。

React 解决 “cross-cutting concerns” 问题相关推荐

react 解决 setState 异步问题
react 解决 setState 异步问题参考文章: (1)react 解决 setState 异步问题 (2)https://www.cnblogs.com/crazycode2/p/97158 ...
解决Cross origin requests are only supported for protocol schemes问题
解决Cross origin requests are only supported for protocol schemes问题问题描述本前端小白在学习的时候尝试按照一个网上的blog的代码来跑 ...
React解决长列表方案(react-virtualized)
github地址高效渲染大型列表的响应式组件使用窗口特性,即在一个滚动的范围内,呈现你给定数据的一小部分,大量缩减了呈现组件所需的时间,以及创建DOM节点的数量. 缺点:滑动过快,可能会出现空白的 ...
react 解决警告Warning: Each child in a list should have a unique “key” prop.
报错: 解决办法: 基本都是因为在循环生成多个组件的时候,没有给组件加上key引起的,所以报错警告.需要循环生成多个组件中,加上key值(唯一值)那么就不会报错了. 示例: class App ext ...
React 解决鼠标移入子元素触发父元素的mouseout事件
方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover 与 mouseenter: mouseover => 不论鼠标指针 ...
【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识
react代码资料: 文件:packages/react-dom/src/client/setInnerHTML.js /*** Copyright (c) Facebook, Inc. and it ...
React解决axios跨域问题
在React中,axios是ajax的再次封装,所以,axios具有同源策略的特点,不能跨域请求数据,如果想跨域请求数据,需要设置跨域代理,方法如下 1.需要在src一级目录下面创建 setup ...
使用react——解决this.props.history.push无法跳转的问题
转自: https://blog.csdn.net/yingzizizizizizzz/article/details/78751305 场景: 一个组件中,含有ul展开数组的组件,在每一行中,都能点 ...
用react解决1px问题
1.创建公共样式 hairLine.scss 核心代码 // src/assets/styles/hairline.scss@mixin scale-hairline-common($color, ...
React解决跨域问题
1.项目安装http-proxy-middleware npm install http-proxy-middleware 2.src下新建setupProxy.js文件 const {createP ...

React 解决 “cross-cutting concerns” 问题

React 解决 “cross-cutting concerns” 问题相关推荐

最新文章

热门文章