一、Context
概念：Context 提供一个无需在每层组件中添加Props,就可以实现组件组件之间通信的方法
 
语法：
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>
 
二、children 属性
 
概念：组件中可以通过 props 传递数据，但是无法解析 html 标签,可通过 children 属性解决
 
 
语法：
调用组件：<组件名>包含 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>
 
三、生命周期
明确：有很多，只写基本
 
挂载：
1.static getDerivedStateFromProps(props) 新增（首次）
2.componentWillMount() 弃（注：同步不触发render，异步触发render）
3.render() 渲染
4.componentDidMount() 异步请求
 
更新：
static getDerivedStateFromProps(props, state) 新增（重新渲染之前 return:null-终止更新,对象-更改state） 替代componentWillReceiveProps
shouldComponentUpdate(newProps, newState) 性能优化，减少页面渲染：return false 不会触发render（实战PureComponent）
componentWillUpdate(newProps, newState) 弃
render() 渲染
getSnapshotBeforeUpdate(oldProps, oldState) 新增，返回的值交给componentDidUpdate参数三
componentWillReceiveProps(newProps) 弃，props属状态发生变化时
componentDidUpdate(oldProps, oldState) 挂载完成
 
卸载：
componentWillUnmount 卸载
 
 
 
 
四、Redux
概念：基于flux架构思想实现的库（Redux = Reducer + Flux）
 
工作流：
 
语法：
创建仓库：const store = Redux.createStore( reducer)
取数据：store.getState()
更新：store.dispatch({type:动作})       参数专业数据action
通知：store.subscribe(回调函数)
 
Reducer创建：
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）的更多相关文章

  1. react基础语法（五） state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  3. react 基础语法复习2- react入门以及JSX

    引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...

  4. react基础语法（一）元素渲染和基础语法规则

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. react 基础语法使用

    刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...

  6. react基础语法二

    这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...

  7. react 基础语法复习3- 数据传递 & 数据变化(props&&state)

    react当中的数据传递是通过 props以及 state来实现的 props <Header name="kugeliu" /> Header组件当中有个name属性 ...

  8. react 基础语法复习1- 搭建开发环境

    之前有看过阮一峰老师的react教程跟着做了一遍,学习了一下.好久没看,有点忘记了,这次跟着脚手架工具系统的复习一遍.顺便学习学习 react-router 和 redux 首先,脚手架工具我使用的是 ...

  9. react基础语法（四） state学习

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. react基础语法（三）组件的创建和复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. C语言宏的神奇写法：语句块作为参数，算半个函数式编程？

    我想要写几个循环做测试代码,每次都写 `for(size_t i = 0; i < n; i++)` 很烦人,然后就灵机一动,能不能用宏实现,然后就写出了: #define repeat(n, ...

  2. 目标检测之单步检测(Single Shot detectors)

    目标检测之单步检测(Single Shot detectors) 前言 像RCNN,fast RCNN,faster RCNN,这类检测方法都需要先通过一些方法得到候选区域,然后对这些候选区使用高质量 ...

  3. HDU_1175_莫队+逆元

    http://acm.hdu.edu.cn/showproblem.php?pid=5145 初探莫队,就是离线排序后的暴力,但是效率大大提高,中间要除法取模,所以用到了逆元. #include< ...

  4. Codeforces_496_E_贪心

    http://codeforces.com/problemset/problem/496/E 这好像叫序列混合贪心,简单地讲,用歌去匹配最符合条件的人.用了multiset,重载了<,加快寻找最 ...

  5. shellcode 反汇编，模拟运行以及调试方法

    onlinedisassembler https://onlinedisassembler.com 在线反汇编工具,类似于lda.功能比较单一. Any.run 等平台在线分析 将shellcode保 ...

  6. cdh集群hive升级，数据不丢失

    1.下载hive-1.2.1安装包 http://archive.apache.org/dist/hive/hive-1.2.1/apache-hive-1.2.1-bin.tar.gz 2.将安装包 ...

  7. Centos7 LVM扩容实例

    Centos7 lvm 扩容与以往版本有所不同   1.插入硬盘,我是在虚拟机上做的测试  直接添加一块5G的硬盘   2.系统读取硬盘信息     # echo "- - -" ...

  8. 动态规划------背包问题（c语言）

    /*背包问题: 背包所能容纳重量为10:共五件商品,商品重量用数组m存储m[5]={2,2,6,5,4}, 每件商品的价值用数组n存储,n[5]={6,3,5,4,6};求背包所能装物品的最大价值. ...

  9. Http API触发小程序云函数案例

    1.创建云函数 在云开发中创建云函数(sum,调用需要两个参数:a.b): 2.invokeCloudFunction触发云函数 const request = require('request'); ...

  10. SpringBoot支持SpringData es

    ElasticSearch CRUD 1.springboot springData es spring data 是spring对数据访问抽象.这些数据可以放入db,index,nosql等包含以下 ...