03-React基础语法（3）

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