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>
