浏览器刷新后如何保持响应组件状态

Question

谢谢你读了我的第一个问题。

我试图使用共享的根的使用反应，反应-路由器和防火墙。因此，我想保持App.js的用户状态。但是当我试图刷新浏览器时，没有找到用户状态。

我试着把钱存起来。但是，在不使用localStorage的情况下，浏览器刷新后是否可以保持组件的状态？

App.js

import React, { Component, PropTypes } from 'react'
import Rebase from 're-base'

import auth from './config/auth'

const base = Rebase.createClass('https://myapp.firebaseio.com')

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      loggedIn: auth.loggedIn(),
      user: {}
    }
  }

  _updateAuth (loggedIn, user) {
    this.setState({
      loggedIn: !!loggedIn,
      user: user
    })
  }

   componentWillMount () {
     auth.onChange = this._updateAuth.bind(this)
     auth.login() // save localStorage
   }

  render () {
    return (
      <div>
        { this.props.children &&
          React.cloneElement(this.props.children, {
            user: this.state.user
          })
        }
      </div>
    )
  }
}
App.propTypes = {
  children: PropTypes.any
}

auth.js

import Rebase from 're-base'
const base = Rebase.createClass('https://myapp.firebaseio.com')

export default {
  loggedIn () {
    return !!base.getAuth()
  },

  login (providers, cb) {
    if (Boolean(base.getAuth())) {
      this.onChange(true, this.getUser())
      return
    }

    // I think this is weird...
    if (!providers) {
      return
    }

    base.authWithOAuthPopup(providers, (err, authData) => {
      if (err) {
        console.log('Login Failed!', err)
      } else {
        console.log('Authenticated successfully with payload: ', authData)
        localStorage.setItem('user', JSON.stringify({
          name: base.getAuth()[providers].displayName,
          icon: base.getAuth()[providers].profileImageURL
        }))
        this.onChange(true, this.getUser())
        if (cb) { cb() }
      }
    })
  },
  logout (cb) {
    base.unauth()
    localStorage.clear()
    this.onChange(false, null)
    if (cb) { cb() }
  },
  onChange () {},
  getUser: function () { return JSON.parse(localStorage.getItem('user')) }
}

Login.js

import React, { Component } from 'react'
import auth from './config/auth.js'

export default class Login extends Component {
  constructor (props, context) {
    super(props)
  }

  _login (authType) {
    auth.login(authType, data => {
      this.context.router.replace('/authenticated')
    })
  }
  render () {
    return (
      <div className='login'>
        <button onClick={this._login.bind(this, 'twitter')}>Login with Twitter account</button>
        <button onClick={this._login.bind(this, 'facebook')}>Login with Facebook account</button>
      </div>
    )
  }
}
Login.contextTypes = {
  router: React.PropTypes.object.isRequired
}

Answer 1

如果通过浏览器刷新重新加载页面，则组件树和状态将重置为初始状态。

若要在浏览器中重新加载页后恢复以前的状态，必须

• 本地保存状态(本地存储/IndexedDB)
• 和/或在服务器端重新加载。

并以这样的方式构建页面，即在初始化时，对先前保存的本地状态和/或服务器状态进行检查，如果找到以前的状态，则将恢复以前的状态。