一、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. MySQL复制(二)--基于二进制日志文件(binlog)配置复制

    基础环境:   主库 从库 服务器IP地址 192.168.10.11 192.168.10.12 版本 5.7.24 5.7.24 已存在的数据库 mysql> show databases; ...

  2. Element ui select 同时获取value和label的值

    html <el-form-item label="单位名称" prop="checkInUnitName"> <el-select v-mo ...

  3. [redis读书笔记] 第一部分 数据结构与对象 压缩列表

    压缩列表是为了节省内存而设计的,是列表键和哈希键的底层实现之一. 压缩列表的逻辑如下,

  4. Nodejs中，path.join()和path.resolve()的区别

    在说path.join()和path.resolve()的区别之前,我先说下文件路径/和./和../之间的区别 /代表的是根目录: ./代表的是当前目录: ../代表的是父级目录. 然后再来说下pat ...

  5. 如何重写object虚方法

    在 C# 中 Object 是所有类的基类,所有的结构和类都直接或间接的派生自它.前面这段话可以说所有的 C# 开发人员都知道,但是我相信其中有一部分程序员并不清楚甚至不知道我们常用的 ToStrin ...

  6. JS-重写内置的call、apply、bind

    首先看call和apply,第一个参数就是改变的this指向,写谁就是谁,如果是非严格模式下,传递null或undefined指向的也是window,二者唯一的区别是执行函数时,传递的参数方式不同,c ...

  7. http报文解析

    http报文结构 报文首部 起始行 请求报文的起始行: 方法(method) request-URL version(http协议版本) 响应报文的起始行 HTTP响应码 请求头 通用首部 请求首部 ...

  8. ASPNetCore 发布到IIS

    ASPNetCore 发布到IIS 准备工作 1.1.  安装IIS.(具体操作不再说明) 安装成功后再浏览器输入localhost得到的页面如下 1.2.  安装dotnet-hosting-2.2 ...

  9. SpringBoot安全管理--（二）基于数据库的认证

    简介: 上篇文章向读者介绍的认证数据都是定义在内存中的,在真实项目中,用户的基本信息以及角色等都存储在数据库中,因此需要从数据库中获取数据进行认证. 开始: 首先建表并且插入数据: pom.xml & ...

  10. React Native运行出现Could not find "iPhone X" simulator

    打开项目文件夹下 node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js 查找 if (!version.startsW ...