react 入门-创建组件（3）工厂方法

最新推荐文章于 2021-12-06 14:59:48 发布
最新推荐文章于 2021-12-06 14:59:48 发布
阅读量2.5k 收藏
点赞数
分类专栏： react javascript 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/teamlet/article/details/78797386
版权

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Factories</title>
</head>
<body>

<!-- Target Container -->
<div id="react-container"></div>

<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>
    const { render } = ReactDOM
    const foodList = ({ list }) =>
        React.createElement('ul', null,
            list.map((item, i) =>
                React.createElement('li', {key: i}, item)
            )
    )
    const listFactory = React.createFactory(foodList)
    const list = [
        "1 apple",
        "1 banana",
        "2 oranges",
        "2 tomatos"
    ]
    render(
        listFactory({list}),
        document.getElementById('react-container')
    )
</script>

</body>
</html>

说明

1、创建无状态函数

const foodList = ({ list }) =>
        React.createElement('ul', null,
            list.map((item, i) =>
                React.createElement('li', {key: i}, item)
            )
)

2、创建工厂方法

const listFactory = React.createFactory(foodList)

3、使用工厂方法,传入实参

render(
    listFactory({list}),
    document.getElementById('react-container')
)
teamlet
关注
专栏目录
C++ 应用软件开发从入门到精通详解
dvlinker的技术专栏
06-21 3万+
本文详细介绍一下Windows平台下用C++开发应用软件的诸多内容，以供大家借鉴或参考。
bem-components-react:一个工厂来创建React组件，这些组件遵循BEM方法并具有一流的打字稿支持
05-17
bem-components-react 一个工厂，用于创建React组件，这些组件遵循BEM方法并具有一流的打字稿支持。 入门 安装： yarn add bem-components-react npm install --save bem-components-react 用法： import { bem } from 'bem-components-react' // specify a class name and a list of variants afterwards const Button = bem . button ( 'button' , [ 'large' , 'small' ] ) function MyComponent ( ) { return < Button large > Click me < / Button > } 该组件将呈
React 学习笔记（一）：JSX；工厂函数组件、ES6类组件；三大属性（state、props、refs）
倚树探星的博客
04-28 1079
学习视频源自：https://www.bilibili.com/video/BV1Et41137Sb?p=4 UP 主：Java基基 一、相关浅析 1.1 React React：用于构建用户界面的 JavaScript 库 Rreact 高效的原因：虚拟 DOM；DOM Diff 算法，最小化页面重绘（更新元素） 在虚拟DOM上做修改，然后虚拟DOM再去操作真实DOM 1.2 babel B...
工厂方法
吴渣渣的博客
09-08 1776
工厂方法 示例 使用典范 工厂方法 定义 ：定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类，工厂方法让类的实例化推迟到子类中进行 创建型 ：创建型 适用场景： 创建对象需要大量重复的代码 客户端（应用层）不依赖于产品类实例如何被创建、实现等细节 一个类通过其子类来指定创建哪个对象 优点：用户只需要关心所需产品对应的工厂，无需关心创建的细节；加入新产品符...
React创建组件的三种方法
泥猴桃的博客
11-07 1309
无状态函数式组件 创建纯展示组件，只负责根据传入的props 来展示，不涉及到要state 状态的操作，是一个只带有一个render 方法的组件类 创建形式如下： function HelloComponent(props) { return &lt;div&gt;Hello {props.name}&lt;/div&gt; } ReactDOM.render(&lt;HelloCompone...
react创建组件的方式
lishundi的博客
08-20 279
react创建组件的方式: （１）工厂（无状态）函数（最简洁，推荐使用） function Component() { return&lt;h1&gt;工厂（无状态）函数（最简洁，推荐使用）&lt;/h1&gt; } （２）ES6语法，（复杂组件，推荐使用） //定义的组件类Component必须继承React的核心组件类Component,extends是继承的意思，rend...
react-reudx的使用
哈哩噜啾啾哈呀呀的博客
07-30 433
1.redux原理及简单使用 a.为什么使用redux？ redux解决的问题是组件状态的管理。 在使用redux之前，我们进行组件之间的通讯时都是使用props进行传递，之后有了Context API，可以使得我们不再对数据进行层层传递，但是还是需要对每个组件的状态（state）进行管理，整体依然是混乱的。 redux的核心之一就是将每个组件的state抽离出来，放在一起，使得一个app只有一个state，存放在store中，任何一个组件需要获取数据的时候，都可以从同一个state中获得，这样首先
React入门笔记：一个小表格组件的构建过程
09-28 3974
vue，angular，react，这三个框架，本来打算学vue。图书馆资料就一本，就转向了React（图书馆突然买了好多。。。），其实还是因为它能够使用native开发，现在开发安卓我用的是kotlin，想着前端学习，也要加把劲了，迈入更好的路。 一直在印象笔记写： 1：组件入门 TIPS：引入库文件（现在还没到jsx，用了两个，一个核心，一个dom库） &lt;script src=...
REACT实战项目从0到1搭建（仅供参考）
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
工厂模式一一工厂方法模式 （factory method）
zhen921的博客
08-24 752
前言         之前的博客介绍了简单工厂，虽然简单工厂达到了工厂模式的效果，但是简单工厂在设计上却有很大的缺陷，其中最大的缺点就是不易扩展，而在工厂方法模式里则修正了这个缺点，下面举例的程序是从简单工厂改的，简单工厂是了解工厂模式的入门，建议先去看看我写的简单工厂的博客。 传送门：https://blog.csdn.net/zhen921/article/details/81986986...
ReactFluxDashboardProto:（完整）使用 React、Flux 模式和 D3 的“实时”工厂仪表板的概念证明
06-14
ReactFluxDashboardProto 在前端使用 React、Flux 模式和 D3 的“实时”工厂仪表板的概念证明。 去做？： 更多图表/可视化。 详细的警报屏幕。 重构 ConfigurationForm 屏幕。 将元素创建辅助函数拉入 FormBuilder mixin。 重构站详细信息屏幕，以便 D3 组件将自身缩放到包含它们的引导列 div。 构建使用： React 调度程序（通量模式） D3.js React路由器 引导程序 ASP.NET MVC 和 WebAPI 截图 ![Factory Overview](/Factory Overview.png) ![Station Details](/Station Details.png) ![Configuration Form](/Configuration Form.png) ![Global Er
面向对象及组件开发（二）工厂模式
王二狗
05-22 322
<script type="text/javascript"> //工厂模式其实就是封装函数 //为什么我们要叫他工厂模式呢?答案在下面: function createPerson(name){ //原料 var obj = new Object(); //制作加工 obj.name=name; ob
js工厂方法模式
Hi_xiexialing的博客
02-23 2138
给我一张名片——工厂方法模式 工厂方法模式（Factory Method）：通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。 工厂方法模式本意是说将实际创建对象工作推迟到子类中。这样核心类就成了抽象类，JavaScript没有像传统类那样的方式轻易创建抽象类， 所以在JavaScript中实现工厂方法模式我们只需要参考它的核心思想即可。所以我们可以将工厂方
React的组件模式
格上技术官方博客
07-10 1523
受到我正为Meetup准备的技术分享启发，我打算花些时间分享下我所了解的React组件模式。组件是React的核心，因此了解如何利用它们对于构建优秀的设计结构至关重要。什么是组件根据React官网的介绍，“组件机制允许你将UI切分成独立、可复用的部分，并针对每个部分单独考虑一些事情”当你第一次运行npm install react时，你得到了一个东西：组件以及它的API。就像JavaScript中...
react---react创建组件的三种方式以及区别:无状态组件、工厂模式、es6语法定义
Wbiokr的博客
06-11 6680
1、无状态组件创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。具体的无状态函数式组件，其官方指出：//在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。无状态函数式组件形式上表现为一个只带有一
Reactjs学习 -- factory、component和element
duran1986的专栏
01-15 4040
在使用reactjs的时候，我们经常会使用到下面三个方法： React.createFactory()React.createClass()React.cleateElement() 这三个方法接受的参数和返回的对象类型是不同的。 React.createFactory 该方法会接受一个component类型的对象，并且返回一个factory方法。使用返回的fa
简单工厂模式和工厂模式
nospeakmoreact的博客
05-09 228
(简单工厂模式不是标准的设计模式) class Fruit{ public: virtual void getFruit()=0; } class Banana:public Fruit { public: virtual void getFruit() { cout<<"我是香蕉"<<endl; } }; clas...
关于 react createFactory 的小技巧
weixin_30307267的博客
07-12 522
官网说明 React.createFactory factoryFunction createFactory( string/ReactClass type ) 复制代码上面函数返回一个用于生成给定类型的ReactElement的函数，类似于 React.createElement。对于type参数可以是html标签名字（例如：“div”，“li”, 运行以后生成一个 jsx 对象 官方
设计模式(创建型)之简单工厂模式(Simple Factory Pattern)
工匠若水
04-27 4532
PS一句：最终还是选择CSDN来整理发表这几年的知识点，该文章平行迁移到CSDN。因为CSDN也支持MarkDown语法了，牛逼啊！概述简单工厂模式（Simple Factory Pattern）又叫静态工厂方法模式（Static FactoryMethod Pattern），是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。当你需要什么，只需要传入一个正确的参数，就可以
React-Native组件开发与实践指南
2. **截图**：`react-native-view-shot`库提供了截取和保存React-Native组件屏幕的能力，这对于创建分享图片或记录应用状态非常有用。 3. **工程重命名**：`react-native-rename`库简化了在项目中更改应用名称和包...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值