React曾经忽略的知识点(下)
1.JSX渲染
想让类似 false
、true
、null
或 undefined
出现在输出中,你必须先把它转换成字符串 :
<div>
My JavaScript variable is {String(myVariable)}.
</div>
2.获取上传文件的信息
class FileInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.files[0].name}`
);
} render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.fileInput = input;
}} /> </label>
<br />
<button type="submit">Submit</button>
</form>
);
}
} ReactDOM.render(
<FileInput />,
document.getElementById('root')
);
3.防止突变,添加数组的方法
1.用concat
重写成
handleClick() {
this.setState(prevState => ({
words: prevState.words.concat(['marklar'])
}));
}
2.用ES6支持数组的spread语法
handleClick() {
this.setState(prevState => ({
words: [...prevState.words, 'marklar'],
}));
};
function updateColorMap(colormap) {
return {...colormap, right: 'blue'};
}
3.不污染原始对象,使用Object.assign方法
function updateColorMap(colormap) {
return Object.assign({}, colormap, {right: 'blue'});
}
updateColorMap
现在会返回一个新对象,而不会改变之前的旧对象。Object.assign
在ES6中,需要polyfill
支持。
如果使用Create React App
,默认情况下 Object.assign
和spread对象都可以使用。
4.Context
Context 设计目的是为共享那些被认为对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。
1.React.createContext
const {Provider, Consumer} = React.createContext(defaultValue);
创建一对 { Provider, Consumer }
。当 React 渲染 context 组件 Consumer 时,它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。
如果上层的组件树没有一个匹配的 Provider,而此时你需要渲染一个 Consumer 组件,那么你可以用到 defaultValue
。这有助于在不封装它们的情况下对组件进行测试。
2.Provider
<Provider value={/* some value */}>
React 组件允许 Consumers 订阅 context 的改变。
接收一个 value
属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。
3.Consumer
<Consumer>
{value => /* render something based on the context value */}
</Consumer>
一个可以订阅 context 变化的 React 组件。
接收一个 函数作为子节点. 函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value
将等于组件树中上层 context 的最近的 Provider 的 value
属性。如果 context 没有 Provider ,那么 value
参数将等于被传递给 createContext()
的 defaultValue
。
注意
每当Provider的值发送改变时, 作为Provider后代的所有Consumers都会重新渲染。 从Provider到其后代的Consumers传播不受shouldComponentUpdate方法的约束,因此即使祖先组件退出更新时,后代Consumer也会被更新。
举个例子:
index.js
import React, { Component } from 'react';
import {ThemeContext,themes,UserContext} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button' function Toolbar(props){
return(
<ThemeContext.Consumer>
{({theme,toggleTheme})=>(
<UserContext.Consumer>
{user=>(
<ThemeTogglerButton user={user} theme={theme} toggleTheme={toggleTheme}/>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
} class LotsContext extends Component {
constructor(props){
super(props); this.toggleTheme = ()=>{
this.setState(state=>({
theme:
state.theme === themes.purple
?themes.pink
:themes.purple,
}));
};
this.state={
theme:themes.pink,
toggleTheme:this.toggleTheme,
user:'mosquito~'
};
}
render() {
const {user,theme,toggleTheme} = this.state;
return (
<ThemeContext.Provider value={{theme,toggleTheme}}>
<UserContext.Provider value={user}>
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider> );
}
} export default LotsContext;
theme-context.js
import React from 'react';
export const themes = {
pink:{
background:"pink",
},
purple:{
background:"purple",
},
}; export const ThemeContext = React.createContext({
theme:themes.pink,
toggleTheme:()=>{},
}); export const UserContext = React.createContext({
user:"mosquito~"
});
theme-toggler-button.js
import React from 'react';
import {ThemeContext} from './theme-context'; function ThemeTogglerButton(props){
return(
<ThemeContext.Consumer>
{({theme,toggleTheme}) => (
<div
onClick={toggleTheme}
style={{width:'100px',height:'100px',backgroundColor: theme.background}}
>
{props.user}
</div> )}
</ThemeContext.Consumer>
);
} export default ThemeTogglerButton;
运行结果:
React曾经忽略的知识点(下)的更多相关文章
- React曾经忽略的知识点(上)
1.JSX 防注入攻击 你可以放心地在 JSX 当中使用用户输入 const title = response.potentiallyMaliciousInput; // 直接使用是安全的: cons ...
- MapReduce会自动忽略文件夹下的.开头的文件
MapReduce会自动忽略文件夹下的.开头的文件,跳过这些文件的处理.
- Sqlserver中一直在用又经常被忽略的知识点一
已经有快2个月没有更新博客了,实在是因为最近发生了太多的事情,辞了工作,在湘雅医院待了一个多月,然后又新换了工作...... 在平时的工作中,Sqlserver中许多知识点是经常用到的,但是有时候我们 ...
- React及Nextjs相关知识点小结
React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...
- React Native初试:Windows下Andriod环境搭建
最近想写个App,又觉得Native App 太无趣了Web App又没那么成熟然后发现了Facebook在9月发布的React Native比较新奇,所以决定捣鼓看看: React Native为F ...
- 【知了堂学习笔记】java 底层容易忽略的知识点
1. java中的关键字 提到关键字,最主要的就是不能用关键字作为标识符,值得注意的有以下几点. ①其中goto与const在java中没有定义,但是也是关键字.这个基本用不到,但是应该有个认知. ② ...
- Javascript基础 - js中曾经忽略的知识点
深入那些曾经忽略的Javascript知识 1. parseInt(string, [radix]),parseFloat(string) 一般我们省略第二个参数,parseInt(‘100’) == ...
- php核心技术与最佳实践知识点(下)
九.缓存 1.缓存三大要素:命中率, 缓存更新策略,缓存最大数据量 2.命中率(mysql为例):mysql提供了一系列的query cache的global status来提现数据库缓存的情况: s ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
随机推荐
- SPOJ 4003 Phone List 题解
题面 啊~,很水的一道trie树模板题: 当两个串存在关系时情况有两种: 若当前串插入后没有任何新建节点,则该串肯定是之前插入的某个串的前缀: 若在插入的时候,有某个经过的节点带有某串结尾的标记,则之 ...
- WebSocket的使用(基于VUE与SpringBoot)
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 We ...
- [wpf] collectionViewsource 排序 和分组
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase" xmlns:swd="clr-n ...
- javascript伪链接(javascript:)
前言 我们经常会看到“javascript:”这种情况,他经常会用在两种属性身上,href和onclick等事件处理器,接下里我们主要说用在onclick等事件处理器上的情况,在href中的应用在之前 ...
- vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏
初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...
- js 学习一 猜数字游戏
知识点 js 操作元素 增 (document.createElement(),document.body.appendChild()), 删(parentNode.removeChild()) ,改 ...
- git 版本回退方法
ORIG_HEAD 某些操作,例如 merage / reset 会把 merge 之前的 HEAD 保存到 ORIG_HEAD 中,以便在 merge 之后可以使用 ORIG_HEAD 来回滚到合并 ...
- 第99:真正理解拉格朗日乘子法和 KKT 条件
- 更新 | 2019年9月计算机二级office模拟题库
随着2019年上半年计算机二级考试的完美落幕,紧接着的便是9月份的考试了. 到目前为止,下半年9月份计算机二级考试报名开通时间在6月前后,现在也基本结束. 2019年9月(56次)全国计算机等级考试( ...
- 硬盘安装ubuntu遇到的问题
终于把这个系统给装上了,陆陆续续弄了4,5天(崩溃...),一直一来都是用U盘来装ubuntu的,挺简单的,但是这个主机识别不了U盘不知道为什么...这个问题又是百度又是Google最终找不到原因只好 ...