美文网首页
[React] Props, State 和 FIFR

[React] Props, State 和 FIFR

作者: Tony_HQ | 来源:发表于2018-05-23 22:41 被阅读0次

最近开始写React了,对于 props 和 state 这两个有了更多的了解。
通过一个实例来谈谈我的理解。

需求

需要一个 Layout Component, 给定 20 张图片,异步渲染出来,先加载完,先渲染。(FIFR)

思路

props 应当传入 20 这个数据, state 用来控制 Layout Component 如何从 0 -> 20。不同的 state 对应对应的 view 。

那么 0 -> 20 这个状态由谁来控制?

Option 1. 如果项目里有用redux之类的 state 管理库,那么无庸赘述,放里面就好了。
Option 2. 这个思路有点类似于递归。有且只有 props 引起的调用会触发若干异步的 setState() 方法。注意有且只有 props 变化才会引起异步的 setState() 方法。所以下一个 render 的生命周期是不会再次触发异步的 setState() 方法。 由此也实现了父 Component 改变 props,Component 本身改变 state。
Option 3. 分层,Layout Component 再定义一个子 Component,只做 render,Layout Component 拿到该子 Component 的 ref。 在异步方法里直接传入参数,再 forceUpdate。

因为项目大小是中等偏小,所以没有用上 redux。
Option 3 又有点太过 Hack,所以我选择了 Option 2。
因为才写 React,不知道是不是有更多的好方法。

相关文章

  • [React] Props, State 和 FIFR

    最近开始写React了,对于 props 和 state 这两个有了更多的了解。通过一个实例来谈谈我的理解。 需求...

  • React props

    React Props state 和 props 主要的区别在于 props 是不可变的,而 state 可以根...

  • React中的props和state

    props和state this.props 由 React 本身设定, 而 this.state 具有特殊的含义...

  • React内部状态state

    state   React组件的数据分为两种:props和state,props是组件的对外接口,state是组件...

  • react native学习笔记6——Props和State

    Props(属性)和State(状态)是React Native中很重要的两个概念。使用Props和State,结...

  • react中的state和props

    前面提过react中的state和props是react组件中的两大部分,有很多人分不清state和props,这...

  • react组件间通信

    react中的props和state props只读,用于组件之间传递信息,这个信息包括:数据和函数 state用...

  • React属性(props)和状态(state)

    React属性(props)和状态(state) 一、属性(props) 属性props是由外部传入、描述性质的,...

  • React基础

    react 教程 react 组件介绍 react state 介绍 react Props 介绍 React:组...

  • react state和props

    state: state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被...

网友评论

      本文标题:[React] Props, State 和 FIFR

      本文链接:https://www.haomeiwen.com/subject/qcidjftx.html