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 ...
随机推荐
- linux项目运行环境搭建
# 命令查看可修改分辨率 xrandr # 选择要修改的分辨率 xrandr -s 1360x768# 删除文件命令 rm -rf 文件名/ # XShell工具进行远程连接了 sudo apt ...
- git reset –mixed –soft –hard命令解释。
直接看官方的解释. 其中HEAD代表版本库,index代表暂存区,另外还有一个我们增删改代码的工作区.所以官方解释翻译过来就是: --hard : 回退版本库,暂存区,工作区.(因此我们修改过的代码就 ...
- 原生js:click和onclick本质的区别(转https://www.cnblogs.com/web1/p/6555662.html)
原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...
- 删除项目中所有的__pycache__ 文件
关于 pycache 当第一次运行 python 脚本时,解释器会将 *.py 脚本进行编译并保存到 __pycache__ 目录 下次执行脚本时,若解释器发现你的 *.py 脚本没有变更,便会跳过编 ...
- selenium与页面交互之一:webdriver浏览器的属性
selenium提供了许多API方法与页面进行交互,如点击.键盘输入.打开关闭网页.输入文字等. webdriver对浏览器提供了很多属性来对浏览器进行操作,常用的如图: get(url).quit( ...
- 087、日志管理之 Docker logs (2019-05-09)
参考https://www.cnblogs.com/CloudMan6/p/7749304.html 高效的监控和日志管理对保持生产系统只需稳定的运行以及排查问题至关重要. 在微服务架构中,由 ...
- PHP 优化之php -fpm 进程
一,php-fpm的启动参数 1 2 3 4 5 6 7 8 9 10 11 12 13 #测试php-fpm配置 /usr/local/php/sbin/php-fpm -t /usr/local/ ...
- 三、Ubuntu16.04 安装Jira8.2.2(自带中文包)和破解
一.环境准备 (一)安装java Jira7.2的运行是依赖java环境的,也就是说需要安装jdk并且要是1.8以上版本,如下: java -version没有任何显示需要下载安装 1.下载链接:ht ...
- spring+mybatis事务配置(转载)
原文地址:http://blog.csdn.net/wgh1015398431/article/details/52861048 申明式事务配置步骤 .xml文件头部需要添加spring的相关支持: ...
- 多线程使用@Async注解创建多线程,自定义线程池
转载自博客https://www.jianshu.com/p/7ac04a501eba