03-React基础语法(3)
1创建context对象 const {Provider, Consumer} = React.createContext()
2 Provider包这最大的组件 并通过value属性传递数据(注:必须是value属性)
3 哪个组件要使用数据,就通过 Consumer包起来
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建一个 Context 对象
const {Provider, Consumer} = React.createContext() //1.定义
class Father extends React.Component
{
render() {
return <Provider value={{data1:111, data2:222}}>
<fieldset>
<legend>Father</legend>
<Middle/>
</fieldset>
</Provider>
}
}
class Middle extends React.Component
{
render() {
return <fieldset>
<legend>Middle</legend>
<Son />
</fieldset>
}
}
class Son extends React.Component
{
render() {
return <Consumer>
{value => <fieldset>
<legend>Son</legend>
<p>{value.data1}</p>
<p>{value.data2}</p>
</fieldset>}
</Consumer>
}
}
//2.渲染
ReactDOM.render(<Father />, document.querySelector("#app"))
</script>
</body>
</html>
调用组件:<组件名>包含 html 标签的内容 </组件名>
获取组件内容:this.props.children (另外写法 <组件名 children=数据></组件名>)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 1. 定义组件
class Modal extends React.Component
{
render()
{
return (
<fieldset>
<legend>自定义遮罩框</legend>
{this.props.msg} {/* 获取组件中的内容 props.children */} {this.props.children}
</fieldset>
)
}
}
// 2. 渲染组件
ReactDOM.render(<div>
<Modal msg="<p style='color:green'>删除成功</p>">
<h1 style={{color:'green'}}>删除成功</h1>
<p>南京</p>
</Modal>
<Modal msg="确定删除吗?">
<p>北京</p>
</Modal>
</div>, document.querySelector('#app'))
</script>
</body>
</html>
创建仓库:const store = Redux.createStore( reducer)
取数据:store.getState()
更新:store.dispatch({type:动作}) 参数专业数据action
通知:store.subscribe(回调函数)
function(state = 数据, action) {
switch(action.type)
{
case 'AAAA':
//逻辑处理
return
....
case 'NNNN':
//逻辑处理
return
default:
//逻辑处理
return
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>周瑜打黄盖距今:<span></span></h1>
<button class="add">递增</button>
<button class="del">递减</button>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js "></script>
<script>
let initState = {
num: 666
}
let reducers = (state = initState, action) => { switch (action.type) {
case 'ADD':
state.num += 1
break;
case 'DEL':
state.num -= 1
break;
default:
break;
}
// console.log(state)
return state
} // 1. 创建仓库<-reducers搞数据
const store = Redux.createStore(reducers)
console.log(store)
console.log(store.getState()) // 2. 获取数 页面展示
document.querySelector('span').innerHTML = store.getState().num // 3. 更新数据
document.querySelector('.add').onclick = function() {
store.dispatch({type:'ADD'})
// dispatch将实参交给reducers的第二个形参action
// 强烈推荐type大写,后期模块名_动作来命名
}
document.querySelector('.del').onclick = function() {
store.dispatch({type:'DEL'})
} // 4. 监听数据库变化 留心自己监听 react-redux
store.subscribe(()=>{ //重新获取数据
document.querySelector('span').innerHTML = store.getState().num
})
</script>
</body>
</html>
03-React基础语法(3)的更多相关文章
- react基础语法(五) state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- react 基础语法复习2- react入门以及JSX
引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...
- react基础语法(一)元素渲染和基础语法规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- react 基础语法使用
刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...
- react基础语法二
这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...
- react 基础语法复习3- 数据传递 & 数据变化(props&&state)
react当中的数据传递是通过 props以及 state来实现的 props <Header name="kugeliu" /> Header组件当中有个name属性 ...
- react 基础语法复习1- 搭建开发环境
之前有看过阮一峰老师的react教程跟着做了一遍,学习了一下.好久没看,有点忘记了,这次跟着脚手架工具系统的复习一遍.顺便学习学习 react-router 和 redux 首先,脚手架工具我使用的是 ...
- react基础语法(四) state学习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- react基础语法(三)组件的创建和复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Java入门基础(类)
类 在Java中表示自定义的数据类型,一个class可以是若干基本类型的组合. public class Student { public String id;//学号 public String n ...
- 如何高效地远程部署?自动化运维利器 Fabric 教程
关于 Python 自动化的话题,在上一篇文章中,我介绍了 Invoke 库,它是 Fabric 的最重要组件之一.Fabric 也是一个被广泛应用的自动化工具库,是不得不提的自动化运维利器,所以,本 ...
- mount.nfs: Stale file handle的解决方法
在NFS客户端挂载rpc共享服务的时候出现这个问题 # mount -t nfs 192.168.20.6:/data /mnt mount.nfs: Stale file handle 原因是当cl ...
- space transport protocols
VSAT系统对TCP的改进 https://www.vsat-systems.com/broadband-satellite-internet/index.html TCP/IP over satel ...
- OSPF配置实验(一)
单区域OSPF 命令: R1(config)#router ospf 1 //启动OSPF进程 R1(config-router)#router-id 1.1.1.1 // ...
- JavaScript中,数组和对象的遍历方法总结
循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...
- [Redis-Python]发布订阅通过Redis异步发送邮件
接收订阅 #!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 21:36 # @Author : LeoShi # @Site : # ...
- SpringCloud微服务:阿里开源组件Nacos,服务和配置管理
源码地址:GitHub·点这里||GitEE·点这里 一.阿里微服务简介 1.基础描述 Alibaba-Cloud致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开 ...
- 杭电1007-----C语言实现
这道题花了好久的时间才做出来,刚开始没有思路,最后看了网上的解答,好难得样子,每次都没有看完,但是掌握了大概思想,今天试着做了一下,已ac 主要思想:先将点对按照x排序,再在x排好序的基础上按照y来排 ...
- 【转】关于apt源配置的问题
涉及的基本配置文件: apt核心配置文件集中在 /etc/apt 其中,管理软件来源的配置文件如下 sources.list // 主要软件源 so ...