03-React基礎語法（3）

時間 2020-02-25

標籤 react 基礎語法欄目 React 简体版

原文原文鏈接

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

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

3、生命週期

明確：有不少，只寫基本

掛載：

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 卸載

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。