React项目中那些奇怪的写法
1、在一个React组件里看到一个奇怪的写法:
const {matchs} = this.props.matchs;
原来,是解构赋值,虽然听说过,但是看起来有点奇怪
下面做个实验:
<script type="text/javascript">
var props = {
key1: 123 + "",
key2: 456,
key3: 789
}
const { key1 } = props
console.log(key1, typeof (key1)) </script>
原来可以减少不少代码量
2、如下
npm install graphql-tag --save
import gql from 'graphql-tag';
import { Query } from 'react-apollo'; const GET_DOGS = gql`
{
dogs {
id
breed
}
}
`; const Dogs = ({ onDogSelected }) => (
<Query query={GET_DOGS}>
{({ loading, error, data }) => {
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`; return (
<select name="dog" onChange={onDogSelected}>
{data.dogs.map(dog => (
<option key={dog.id} value={dog.breed}>
{dog.breed}
</option>
))}
</select>
);
}}
</Query>
);
很明显,return里这个箭头函数的参数将是传入一个对象, 并且很可能不止3个属性,因此进行结构赋值以取属性来用。只有当函数的参数是一个对象时,变量
loading, error, data
才会通过解构赋值生成。如果函数调用时没提供参数,变量
loading, error, data
就不会生成,并报错。
为什么gal后面跟一个字符串?
原来是模板字符串的功能:它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)
alert`123`
// 等同于
alert(123)
参考:http://es6.ruanyifeng.com/#docs/string
3、
@withHeader
export default class Demo extends Component {
render() {
return (
<div>
我是一个普通组件
</div>
);
}
}
在这里使用了ES7
里的decorator
,来提升写法上的优雅,但是实际上它只是一个语法糖,下面这种写法也是可以的:
const EnhanceDemo = withHeader(Demo);
参考:https://segmentfault.com/a/1190000010371752
React项目中那些奇怪的写法的更多相关文章
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
随机推荐
- [leetcode]984. 不含 AAA 或 BBB 的字符串
给定两个整数 A 和 B,返回任意字符串 S,要求满足: S 的长度为 A + B,且正好包含 A 个 'a' 字母与 B 个 'b' 字母: 子串 'aaa' 没有出现在 S 中: 子串 'bbb' ...
- 【Tomcat】Tomcat的类加载机制
在Tomcat中主要有以下几种类加载器:(图片来自网络) tomcat启动时,会创建几种类加载器: 1 Bootstrap 引导类加载器 加载JVM启动所需的类,以及标准扩展类,位于jre/lib/e ...
- Java高并发--安全发布对象
Java高并发--安全发布对象 主要是学习慕课网实战视频<Java并发编程入门与高并发面试>的笔记 发布对像:使一个对象能够被当前范围之外的对象使用. 对象逸出:一种错误的发布.当一个对象 ...
- python文件夹copy器(多进程版)
本节的练习的要求如下: 输入要拷贝文件夹的文件名称 读取该文件夹下的所有文件 启动5个进程来拷贝文件夹,将拷贝成功的文件名称放入队列中 主进程中显示文件拷贝的进度 代码如下: import multi ...
- java安全管理器SecurityManager介绍
java安全管理器类SecurityManager简单剖析: javadoc介绍: SecurityManager是一个允许应用实现一种安全策略的类.它允许一个应用去明确,在执行一个可能安全或者敏感的 ...
- Yii2基本概念之——行为(Behavior)
使用行为(behavior)可以在不修改现有类的情况下,对类的功能进行扩充.通过将行为绑定到一个类,可以使得类具有行为本身所具有的属性和方法,就好像是类本来就具有的这些属性和功能一样. 好的代码设计, ...
- canvas-a11htmlANDcanvas.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- es6 语法 (类与对象)
{ // 基本定义和生成实例 class Parent{ constructor(name='mukewang'){ this.name=name; } } let v_parent1=new Par ...
- 利用Fiddler修改请求信息通过Web API执行Dynamics 365操作(Action)实例
本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复261或者20170724可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...
- Mixing a dll boost library with a static runtime is a really bad idea错误的解决
作者:朱金灿 来源:http://blog.csdn.net/clever101 同事在使用boost库时遇到一个问题,在编译时出现一个错误:Mixing a dll boost library wi ...