React官方文档学习笔记（二）

深入 JSX

在运行时选择类型

错误

import React from 'react';
import { PhotoStory, VideoStory } from './stories';const components = {photo: PhotoStory,video: VideoStory
};function Story(props) {// 错误！JSX 标签名不能为一个表达式。return <components[props.storyType] story={props.story} />;
}
复制代码

正确：如果你的确想通过表达式来确定 React 元素的类型，请先将其赋值给大写开头的变量，不能是小写的！

import React from 'react';
import { PhotoStory, VideoStory } from './stories';const components = {photo: PhotoStory,video: VideoStory
};function Story(props) {// 正确！JSX 标签名可以为大写开头的变量。const SpecificStory = components[props.storyType];return <SpecificStory story={props.story} />;
}
复制代码

扩展属性

function App1() {return <Greeting firstName="Ben" lastName="Hector" />;
}function App2() {const props = {firstName: 'Ben', lastName: 'Hector'};return <Greeting {...props} />;
}
复制代码

当你构建通用容器时，扩展属性会非常有用。然而，这样做也可能让很多不相关的属性，传递到不需要它们的组件中使代码变得混乱。我们建议你谨慎使用此语法。

Context

Context 设计目的是为共享那些被认为对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

Fragments

React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

class Columns extends React.Component {render() {return (<><td>Hello</td><td>World</td></>);}
}<table><tr><td>Hello</td><td>World</td></tr>
</table>
复制代码

Portals

高阶组件

具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

React官方文档学习笔记（二）相关推荐

ZooKeeper官方文档学习笔记03－程序员指南03
我的每一篇这种正经文章,都是我努力克制玩心的成果,我可太难了,和自己做斗争. ZooKeeper官方文档学习笔记04-程序员指南03 绑定 Java绑定客户端配置参数 C绑定陷阱: 常见问题及故障 ...
Open3D官方文档学习笔记
Open3D官方文档学习笔记第一部分--点云 1 可视化点云 2 体素降采样 3 顶点法线评估 4 访问顶点法线补充:Numpy在Open3D中的应用 5 裁剪点云补充1:获取点云坐标补充2: ...
ZooKeeper官方文档学习笔记01－zookeeper概述
纠结了很久,我决定用官方文档学习 ZooKeeper概述学习文档学习计划 ZooKeeper:分布式应用程序的分布式协调服务设计目标数据模型和分层名称空间节点和短命节点有条件的更新和监视 ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
Android 开发之ViewPage官方文档学习笔记
2019独角兽企业重金招聘Python工程师标准>>> 以下为官网的官方文档,我将从翻译该文档开始学习. ViewPager extends ViewGroup java.lang. ...
xarray官方文档学习笔记（序章）
个人需要开了这个坑不定时更新希望能和大家共同学习和交流工作中难免有不足和错误,希望大家多多批评指正 xarray官方文档首页:http://xarray.pydata.org/en/stable ...
OpenCV-Python官方文档学习笔记（上）
整理自OpenCV-Python官方文档一. OpenCV-Python Tutorials 1 安装及验证 2 图片读写,展示 3 视频读写,展示 4 绘图功能(绘制几何形状:线.圆.椭圆.矩形. ...
kafka官方文档学习笔记2--QuickStart
下载kafka https://www.apache.org/dyn/closer.cgi?path=/kafka/1.0.0/kafka_2.11-1.0.0.tgz 解压安装包 > tar ...
kafka官方文档学习笔记3--配置简述
Kafka使用key-value键值对格式的配置,这些配置即可以在进程启动时,根据指定的properties文件加载,也可以通过编程的方式,在程序中动态指定:根据集群中角色的不同分为6种配置: bro ...