分享19 个来自 2019 React Conf 的总结
1. 服务于开发者体验的用户体验
2.令人惊叹的易用性,性能以及并发模式!
并发模式
3. CSS-in-JS-at-FB
.blue { color: blue; }
.red { color: red; }
// 展示为红色
<span class="red blue">
Which color will I be?
</span>
blue
。因为它排列在类声明的第二位,因此我们希望它应该具有优先权。但是事实并非如此。.red
排列在样式表的第二位,所以会优先展示为红色。如果这些位于不同的样式表之中,则他们在页面中的加载顺序将很重要。开发人员可以以像素为单位进行编码,但是其工作可以在 REM 中进行编译。
他们通过执行类型检查(捕获和修复错别字,检测并删除未使用的样式。避免跨浏览器的陷阱)来创造安全性。
向开发人员展示可访问性的错误。
组件具有默认样式,并且可以被覆盖(包括类型安全!)
重复规则校验,减少 CSS 文件体积(Facebook 在最近的重构中,将文件从 413kb 改写为 74kb)
原子 CSS
.c0 { color: blue; }
.c1 { color: red; }
.c2 { font-size: 16px; }
//生成的组件(预先优化)
// Generated Component (Pre-Optimized)
const styles = {
blue: {color: 'c0'},
default: {color: 'c1', fontSize: 'c2'},
};
functionMyComponent(props) {
return(
<span className={styles(
'default',
props.isBlue && 'blue',
)}>
HelloWorld!
</span>
);
}
props
来设置 span
标签的颜色。但是,此代码可以得到进一步优化。// 不再需要样式块
functionMyComponent(props) {
return(
<span className={styles(
(props.isBlue ? 'c0 ': 'c1 ') + 'c2 '
)}>
HelloWorld!
</span>
);
}
4.数据驱动的JavaScript
分阶段代码分割
1.载入中
2.显示
3.分析工具
到第一个有意义的画面的时间
数据驱动的代码分割
5.解决世界的饥饿
6.使 REST 更好(和更安全)
REST
❌ 数据格式不规范
❌ 猜谜游戏(如何判定一个失败的请求,400,401,还是 404?)
❌ 无意义的对话
❌ 无合约协议
GRAPHQL
✅ 规范的数据格式
✅ 没有猜谜游戏
✅ 有意义的对话(由用户定义)
✅ 强力的合同协议
7.React 的引擎(构建自定义渲染器)
8.本地化(这太重要了!)
9.无障碍马拉松
10.您不需要Redux(对吗?)
11.时间旅行到1999
12.即使开发工具也与UX有关
更好的性能
新的API支持
UX新功能
13.可疑数据(Relay 很棒)
constComposer= (props) => {
const data = useQuery(graphql`
query ComposerQuery {
me {
photo {
uri
}
}
}
`, variables);
return(
<div>
<img src={data.me.photo.uri} />
</div>
);
}
constHome= (props) => (
<Suspense fallback={<Placeholder/>}>
<Composer/>
</Suspense>
);
preloadQuery
usePreloadedQuery
14. React是小说
显示,不告诉
constNav= ({ links }) => (
<nav>
{
links.map(link => (
<Link to={link.to}>{link.name}</Link>
))
}
</nav>
);
constHeader= () => {
const links = [
{ name: 'Home', to: '/home'},
{ name: 'Settings', to: '/settings'},
];
return(
<>
<Nav links={links} />
</>
);
}
const links = [
{ name: 'Home', to: '/home'},
{ name: 'Settings', to: '/settings'},
{ name: 'Login', to: '??'},
];
constNav= ({ links }) => (
<nav>
{
links.map(link => {
return link.to
? <Link to={link.to}>{link.name}</Link>
: <a onClck={link.onClick}>{link.name}</Link>
})
}
</nav>
);
constHeader= () => {
const links = [
{ name: 'Home', to: '/home'},
{ name: 'Settings', to: '/settings'},
{ name: 'Login', to: '??'},
];
return(
<nav>
<Link to="/home">Home</link>
<Link to="/settings">Settings</link>
<a onClick={onSelectLogin}>Login</a>
<nav/>
);
}
请记住,或早或晚,在达到完美之前,你必须放手去做,继续接下来的事。
15. UX驱动的流体动画
16.反复体验
17.简单事物的复杂性
18.优雅的透明度
19.奇迹驱动的开发
时间戳
第一天
Keynote @ 00:33:07: Tom Occhino & Yuzhi Zheng
使用 React 和 Relay 构建新的 Facebook @ 01:09:45:Ashley Watkins和Frank Yan
我们的团队如何使用React Native拯救世界@ 01 : 43 : 46:Tania Papazafeiropoulou
使用 Hooks 和代码生成器将GraphQL的优点带到REST API @ 02 : 39 : 03:Tejas Kumar
构建一个自定义的React Renderer @ 03:11:21:Sophie Alpert
⚡️Codemod-ing摆脱4MB的JavaScript @ 05 : 02 : 33:Spencer Miskoviak
⚡️️️️️️git很难但用git进行时间旅行很容易@ 05 : 09 : 20:Monica Powell
TypeScript,GraphQL和代码生成@ 05 : 16 : 25:Salvatore Aiello
为什么 React 正在吃世界@ 05 :22: 55:Adam Wolff
React翻译了吗?@ 05 : 32 : 58:Nat Alison
构建(和重新构建)Airbnb设计系统 @ 06:07:13:Maja Wichrowska和Maja Wichrowska
可访问性是一场马拉松,而不是短跑 @ 07:33:32:布列塔尼· 费恩斯特拉
2019年的React State状态@ 08 : 05 : 17:Becca Bailey
让我们像1999年一样编程@ 08 : 35 : 14:Lee Byron
第二天
React Developer Tooling @ 00:32:00:Brian Vaughn
Data Fetching With Suspense In Relay @ 01:00:31:Joe Savona
前端的自动可视化 @ 01:32:17:Cameron Yick
React 就是小说 @ 02 : 32 : 13:Jenn Creighton
渐进式Web动画@ 02 : 57 : 48:Alexandra Holachek
⚡️️️️️️Programming=热门唱片@ 05 : 03 : 06:Jay Johnson
每天在UI工具上进行⚡️️️️️️Comonads@ 05 :10: 50:Juan Paucar
使用Wick编辑器创建游戏,动画和交互作用:UX对话@ 05 : 27 : 53:Luca Damasco
建立 React-Select @ 06 : 01 : 52:Jed Watson
通过React 促进政府支出的透明度 @ 07:32:39:Lizzie Salita
奇迹驱动的开发:使用React制作宇宙飞船@ 07:57:17s:Alex Anderson
分享19 个来自 2019 React Conf 的总结相关推荐
- 129.精读《React Conf 2019 - Day2》
1 引言 这是继 精读<React Conf 2019 - Day1> 之后的第二篇,补充了 React Conf 2019 第二天的内容. 2 概述 & 精读 第二天的内容更为精 ...
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(下)
[华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(上)
[引言] 前段时间写过一篇关于前端技术的概括性文章<前端技术的选择]>(http://3ms.huawei.com/km/blogs/details/7971337),本文就对于当下顶级的 ...
- 【报告分享】抖音-2019年下半年短视频平台营销通案.pdf
今天分享的报告来自巨量引擎于2019年8月推出的<2019下半年抖音短视频平台营销通案.pdf>.报告包含以下三大部分:1.大势所趋-短视频社交新"视"代:2.抖音20 ...
- React Conf 2018大会发布React Hooks和React 16.7 Alpha
最近的React Conf 2018大会上推出了React 16.7的alpha版本,包含了"Hooks"提案(允许开发人员在不编写类的情况下使用状态和其他React特性),以及几 ...
- 视频教程-2019 react入门至高阶实战,含react hooks-ReactJS
2019 react入门至高阶实战,含react hooks 从事前端开发近5年时间,曾任职于丽珠集团等大型企业担任高级前端开发工程师职位,积累了很多大厂的前端开发经验. 目前处于创业期,正在筹备自己 ...
- React Conf 2018 专题 —— React Today and Tomorrow Part II 视频中英双语字幕
距离 React Conf 2018 结束已经将近一个月了,距离上个 React Conf 2018 的中英文双语视频发布也有两周的时间了,这两周,一直在进行Dan Abramov 的关于 React ...
- React Conf 2018 专题 —— React Today and Tomorrow Part I 视频中英双语字幕
最近在 掘金翻译计划 校对了一篇 Dan Abramov 的关于 React Hooks 的文章,在 Sophie Alpert 和 Dan 在 React Conf 2018 上对 Hooks 的提 ...
- 分享 19 个免费好用的 CSS 代码样式生成器工具
整理编辑 | 杨小爱 CSS 生成器可以帮助每个开发人员的生活变得轻松,提升工作效率,因为它可以立即实现大部分 CSS 效果,如阴影.边框.按钮颜色/形状等等. 在本文中,我将分享 19个实用的 CS ...
最新文章
- 004 两种方法找寻路call
- mysql freebuf_浅析mysql存储过程
- 只有IE能上网,其他浏览器均不可以!
- machine learning (7)---normal equation相对于gradient descent而言求解linear regression问题的另一种方式...
- 引用一个falsh使它显示出来
- 如何对金蝶kis进行结转损益操作
- 艾草减肚子方法非常有效 赛乐赛骗局是真的吗
- matlab eig函数_MATLAB作图实例:14:绘制虚数和复数图
- amoeba mysql_详解如何利用amoeba(变形虫)实现mysql数据库读写分离
- 异常、信息国际化样例
- Process finished with exit code 132 (interrupted by signal 4: SIGILL)
- C语言实现简单的电梯控制系统
- RIGOL示波器使用
- 如何使用阿里云虚拟主机搭建博客(一)初识篇
- 无法加载文件 C:\Users\Administrator\PycharmProjects\pythonProject\venv\Scripts\activate.ps1,因为在此系统上禁止运行脚本。
- 谈NANDnbsp;Flash的底层结构和解析
- gorm升级V1至V2
- php 抓取京东搜索页,京东商品列表页爬虫采集方法 - 八爪鱼采集器
- python实验原理_【python】《统计学原理实验教程(Python)》书中代码实现
- ios swift5 时间戳 时间差 日期格式 Date 日期字符串
热门文章
- 探析大数据期刊文章研究热点
- 通过游戏编程学Python(5)— 猜成语(下)
- CISCO交换机概览
- 什么是高绩效团队_导致高绩效团队的行为模式
- 导航编程用c语言还是c加加,C语言/C加加大神程序员老司机带你玩转C语言指针详解...
- 使用Afl-fuzz (American Fuzzy Lop) 进行fuzzing测试(二)——详细使用说明(README.txt)
- Tigo与APsystems签署许可协议,并撤回专利侵权诉讼
- 华为数通技术及ENSP模拟器学习
- 未来的程序员还会有今天的收入吗?
- 华为设备配置DHCP,旁挂式AC+AP无线局域网(3)