一、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. PySpark Rdd Cheat Sheet Python

  2. Asp.net core下利用EF core实现从数据实现多租户（2） : 按表分离

    前言 在上一篇文章中,我们介绍了如何根据不同的租户进行数据分离,分离的办法是一个租户一个数据库. 也提到了这种模式还是相对比较重,所以本文会介绍一种更加普遍使用的办法: 按表分离租户. 这样做的好处是 ...

  3. python练习——第2题

    原GitHub地址:https://github.com/Yixiaohan/show-me-the-code 题目:将 0001 题生成的 200 个激活码(或者优惠券)保存到 MySQL 关系型数 ...

  4. vue 过渡 & 动画

    过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...

  5. Webpack 中 file-loader 和 url-loader 的区别

    如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用u ...

  6. np.vstack与np.hstack

    转自:https://zhuanlan.zhihu.com/p/82996332   留作备忘

  7. ES6 - 基础学习(8): Promise 对象

    概述 Promise是异步编程的一种解决方案,比传统的解决方案(多层嵌套回调.回调函数和事件)更强大也更合理.从语法上说,Promise是一个对象,从它可以获取异步操作的消息,Promise 还提供了 ...

  8. 编译Qualcomm的Hexagon exampls错误

    在下载了Qualcomm的Hexagon SDK 351版本之后,想跑里面的examples,然后参照文档的说,比如在examples/common/sobel3x3_v60目录下面,先执行了SDK根 ...

  9. 7.Android-压力测试、单元测试、日志猫使用

    1.压力测试monkey 通过cmd输入下面命令: adb shell monkey -p com.example.phonecall --ignore-crashes --ignore-timeou ...

  10. 同时安装了python和3，pycharm如何切换版本

    1.打开pycharm 2.进入  File->Setting->Project:你的项目名->Project Interpreter 3.通过Project Interpreten ...