react-global-shared用途和使用

本文介紹了react-global-shared的基本使用,注意事項及api使用

簡介

用於管理react全局狀態,調用簡單,用時初始化,兼容hook,能夠在純function中操做狀態

源碼

github

Api

• connect：高階組件用於給包裹的Component注入props，返回值是React.Compoent。
• useGlobalState： 想要達到的目的與connect同樣，只是在hook中沒什麼必要用高階組件，返回值是value。

Api使用示例

connect (Component, ...stateObj)

爲了和hooks作區分這裏組件全用class component

const menuState = {
    name: "menus",
    state: [ {name: "首頁"}, {name: "沸點"}, {name: "話題"} ],
    add: function(menu){
        this.state = [menu, ...this.state]
    }
}

class TopMenu extends React.Component{
    render(){
        const menus = this.props.menus
        return <ul>
            {menus.map(menu => <li>{menu.name}</li>)}
        </ul>
    }
}

class FooterMenu extends React.Component{
    render(){
        const menus = this.props.menus
        return <ul>
            {menus.map(menu => <li>{menu.name}</li>)}
        </ul>
    }
}

const CTopMenu = connect(TopMenu, menuState)
const CFooterMenu = connect(LeftMenu, menuState)

class Main extends React.Component{
    render(){
        return <div>
                <button onClick={menuState.add({name:"活動"})}>add Menu</button>
                <CTopMenu />
                <CFooterMenu />
        </div>
    }

}
export default Main
複製代碼

useGlobalState (stateObj)

hooks中綁定

const menuState = {
    name: "menus",
    state: [ {name: "首頁"}, {name: "沸點"}, {name: "話題"} ],
    add: function(menu){
        this.state = [menu, ...this.state]
    }
}

const TopMenu = () => {
    const menus = useGlobalState(menuState)
    return <ul>
        {menus.map(menu => <li>{menu.name}</li>)}
    </ul>
}

const LeftMenu = () => {
    const menus = useGlobalState(menuState)
    return <ul>
        {menus.map(menu => <li>{menu.name}</li>)}
    </ul>
}

const Main = () => {
    return <div>
                <button onClick={menuState.add({name:"活動"})}>add Menu</button>
                <TopMenu />
                <LeftMenu />
            </div>
}
複製代碼

| 這兩個示例實現的是一樣的功能，多個組件共享狀態，任意位置調用可觸發render。
useGlobalState和connect,綁定數據的方式不一樣，可是調用的方法是同樣的。

常見問題

修改了this.state並無觸發改變:

考慮到性能問題這裏只監聽了一層數據,因此推薦修改state使用immutability-helper修改數據