一、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. Codeforces_805

    A.当l == r时,肯定输出这个数就可以了,当存在两个或两个以上连续的数时,2肯定是最多的数,或最多的数之一. #include<bits/stdc++.h> using namespa ...

  2. HDU_1232_并查集

    http://acm.hdu.edu.cn/showproblem.php?pid=1232 第一道并查集,挺好理解的,初始化,查找根节点,连接,路径压缩. #include<iostream& ...

  3. Android客户端OkHttp的使用以及tomcat服务器的解析客户端发过来的数据

    2020-02-15 21:25:42 ### android客户端客户向服务器发送json字符串或者以参数请求的方式发送数据 其中又分为post请求和get请求 1.activity.xml < ...

  4. bootstrap 按钮组件

    按钮组件主要的类名: .btn-toolbar     把几个  .btn-group 组合在一起,更复杂的组件 .btn-group .btn-group-vertical   垂直堆叠显示    ...

  5. c语言小游戏-扫雷的完成

    C语言-扫雷游戏 本文将对此游戏做一个大致的概述,此代码适合初学者,编写软件使用了vs2017. 该代码可以实现如下功能: 1.用户可以选择3个难度,分别布置不同个数的雷. 2.随机数设置雷的位置. ...

  6. Go语言实现：【剑指offer】链表中倒数第k个结点

    该题目来源于牛客网<剑指offer>专题. 输入一个链表,输出该链表中倒数第k个结点. Go语言实现: type ListNode struct { Val int Next *ListN ...

  7. onboard procossor and cross-compile

    星载处理器 ERC32-TSC695F The European Space Agency’s ERC32 is a microprocessor implementing a SPARC V7 pr ...

  8. Mysql 5.7 主从复制的多线程复制配置方式

    数据库复制的主要性能问题就是数据延时 为了优化复制性能,Mysql 5.6 引入了 “多线程复制” 这个新功能 但 5.6 中的每个线程只能处理一个数据库,所以如果只有一个数据库,或者绝大多数写操作都 ...

  9. android wifi断开原因分析

    最近在解bug的过程中经常遇到密码正确但处于saved的状态,总结原因有已下几种: 1 在ASSOCIATING阶段由于丢包导致ASSOC REJECT 03-16 09:22:12.440 D/Wi ...

  10. 51nod 1002 数塔取值问题 dp

    动态规划 1002 数塔取数问题 1.0 秒 131,072.0 KB 5 分 1级题   一个高度为N的由正整数组成的三角形,从上走到下,求经过的数字和的最大值. 每次只能走到下一层相邻的数上,例如 ...