一、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. QT5如何设置QLabel中字体的颜色

    修改了wd的文章: 如何使用Qt5,设置QLabel中字体的颜色. 大致有几种做法: 一是使用setPalette()方法: 二是使用样式表: 三是可以使用QStyle: 四是可以在其中使用一些简单的 ...

  2. PAT_B数素数 (20)

    数素数 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 令Pi表示第i个素数.现任给两个正整数M &l ...

  3. P4174 [NOI2006]最大获利 (最大权闭合子图)

    P4174 [NOI2006]最大获利 (最大权闭合子图) 题目链接 题意 建\(i\)站台需要\(p_i\)的花费,当\(A_i,B_i\)都建立时获得\(C_i\)的利润,求最大的利润 思路 最大 ...

  4. Android Studio 学习笔记(三)：简单控件及实例

    控件.组件.插件概念区分 说到控件,就不得不区分一些概念. 控件(Control):编程中用到的部件 组件(Component):软件的组成部分 插件(plugin): 应用程序中已经预留接口的组件 ...

  5. LeetCode 23 Hard，K个链表归并

    本文始发于个人公众号:TechFlow,原创不易,求个关注 链接 Merge k Sorted Lists 难度 Hard 描述 Merge k sorted linked lists and ret ...

  6. 在C#中通过使用Newtonsoft.Json库来解析百度地图地理编码（GeoCoder）服务接口返回的Json格式的数据

    百度地图地理编码(GeoCoder)服务接口返回的Json格式的数据,如下所示: http://api.map.baidu.com/geocoding/v3/?address=**省**市**区**路 ...

  7. docker-compose 常用命令整理：

    docker-compose -f my.yaml version 查看docker-compose版本信息 docker-compose -f lnmp.yaml images 列出镜像 docke ...

  8. Nginx location配置 正则表达式

    一. location 的匹配符 Syntax: location [ = | ~ | ~* | ^~ ] uri { ... }location @name { ... }     1.  语法格式 ...

  9. 自己用C语言写RH850 F1L serial bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 由于有了RH850 F ...

  10. 【HDU - 2859 】Phalanx （dp 最大对称子图）

    Phalanx 先搬翻译 Descriptions: 给你一个矩阵,只由小写或大写字母构成.求出它的最大对称子矩阵的边长. 其中对称矩阵是一个k*k的矩阵,它的元素关于从左下角到右上角的对角线对称.例 ...