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修改数据