Quiero usar el sistema reaccionar hacer actuar como el sistema de actividad de Android
siguiendo mi código, el error es que configuré el estado de actE k: "v", pero la línea final app.setState({act: actE}) causa el estado de actE k: nulo, ¿por qué se restablece el estado de actE?
class Act extends PureComponent<any, { k: string }> { constructor(props: any, context: any) { super(props, context) this.state = { k: null } } render() { return this.state.k } } class Act2 extends Act { } class App extends PureComponent<any, { act: ReactElement }> { constructor(props: any, context: any) { super(props, context) this.state = { act: null } } render() { return this.state.act; } } var app: App ReactDOM.render(<App ref={e => app = e}/>, document.querySelector("#root")) var act: Act let actE = <Act ref={(e) => { if (e) { act = e } }}/> app.setState({act: actE}) act.setState({k: "v"}) var act2: Act2 var act2E = <Act2 ref={(e) => { if (e) { act2 = e } }}/> app.setState({act: act2E}) act2.setState({k: "v2"}) app.setState({act: actE})De hecho, me perdí esta línea inicialmente. Así que pensé que estabas administrando componentes "ocultos".
return this.state.act; Pero en realidad está intentando montar actE y luego act2E y luego volver a actE . está bien. Su código esencialmente se traduce a algo como esto en un código React normal.
const actE = <Act ref={ref} />, act2E = <Act ref={ref2} /> return flag ? actE : act2E Después de desmontar actE , ¿qué pasó con las cosas del interior?
El problema es la siguiente línea.
let actE = <Act ref={(e) => { if (e) { act = e } }}/> No puedes usar un if aquí. Porque si haces eso, te pierdes el desmontaje. Se supone que act en el código anterior es null después de desmontar. Y React quiere asegurarse de que nada de lo interno quede expuesto después de eso.
Para ser honesto, debería preguntarse por qué su computadora aún no se ha congelado porque su código debería producir una pérdida de memoria;)
Mi solución tmp es caché reutilizada estado de reactElement y vars de instancia, cuando reutilice reactElement, configure manualmente el caché
siguiente es mi código:
class Act extends PureComponent<any, { k: string }> { constructor(props: any, context: any) { super(props, context) this.state = {k: null} } k2: string render() { return `${this.state.k} ${this.k2}` } } class Act2 extends Act { } class App extends PureComponent<any, { act: ReactElement }> { constructor(p: any) { super(p) this.state = {act: null} } render() { return this.state.act } } var parentKeys = Object.keys(new PureComponent({})) var app: App var act: Act /** * reactElement is replace will be unmounted, for ex, my following code act2E instead actE, actE will be unmounted, if I wanna reuse actE, I should cache it's 'state' and instance vars * @param act */ var getCache = (act: any) => { var keyVal: any = {} var keys = Object.keys(act).filter((e) => { return !parentKeys.includes(e) }) keys.forEach((key) => { if (key != "state" && !key.match(/^_react/i)) { // should use special meth #setState to set, _react I don't need it keyVal[key] = act[key] } }) return {keyVal: keyVal, state: act.state} } var setCache = (newAct: any, actCache: any) => { for (var [k, v] of Object.entries(actCache.keyVal)) { newAct[k] = v } act.setState(actCache.state) act.forceUpdate() } var actE = <Act ref={(e) => { act = e }}/> var act2: Act2 var act2E = <Act2 ref={(e) => { act2 = e }}/> testReact(<App ref={e => app = e}/>) app.setState({act: actE}) act.setState({k: "v"}) act.k2 = "k2" var actCache = getCache(act) app.setState({act: act2E}) act2.setState({k: "v2"}) app.setState({act: actE}) setCache(act, actCache)