React数据流
 React数据流
dengdeng12 发表于7个月前
 React数据流
  • 发表于 7个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 近期做了一个项目脉冲云,脉冲云是一个基于敏捷思想,提高开发效率的工具;开发/...

                    React数据流
近期做了一个项目脉冲云,脉冲云是一个基于敏捷思想,提高开发效率的工具;开发/运维一体化的协作平台。脉冲云的前端用的是react技术,下面简单介绍下在开发过程中自己对于react的理解,以及一些运用。

react是单向数据流,数据主要是从父组件通过props传递到子组件。如果父组件接受新的props或者state重新渲染,所有子组件也会重新渲染(如果porp是相同时不想执渲染,可在shouldComponentUpdate(nextProps, nextState)方法做判断如果相同返回false则不会渲染)。state为组件内部值,子组件非必要可不需内部值。

react组件常用更新方式props和state(有时也可调用this.forceUpdate()进行强制刷新)。

props
props可以简单的理解为标签的属性(attribute),props是只读的,不可以在组件内部随意更改。

  render() {
    const { builders} = this.props;
    return (
      <div>
         <FlexTable>
        {
          _.map(list, (builders, index) => {
            return <BuilderCard key={index} builder={builder} />;
          })
        }
        </FlexTable>
      </div>
    );
  }
(子组件BuilderCard就可以接受到父组件传递的props值builder)

state
存在于组件内部的值,只能当前组件调用获取(当组件层次嵌套时,子组件非不要可不需state)。

  render() {
    return (
      <div>
       <input
              type="text"
              className="form-control"
              value={username}
              placeholder="手机号码或Email"
              disabled={fetching}
              onChange={(e) => { this.setState({ username: e.target.value }); }}
            />
      </div>
      );
  }

当子组件发生变化想要通知父组件或者更新其他子组件时,子组件需要通过父组件传递回调函数,子组件触发这个函数用以告知父组件子组件的变化,此时父组件可进行state更新重新渲染继而渲染所有子组件(正好形成一个单项数据流的循环)。

父组件

 {
  handleChange = (e) =>{
    this.setState({text:e});
  }
  render() {
    const {text} = this.state.text;
    return (
      <div>
      <ChildElement text={text} onChange={this.handleChange} />
      </div>
      );
    }
 }

子组件
{
    render() {
      const { onChange } =this.props;
    return (
      <div>
            <input
              type="text"
              className="form-control"
              value={username}
              placeholder="手机号码或Email"
              disabled={fetching}
              onChange={(e) => { onChange(e.target.value) }}
            
            />
      </div>
    );
  }
}

子组件发生变化通知父组件,父组件更新子组件也更新。

 

案例参考:脉冲云

共有 人打赏支持
粉丝 0
博文 1
码字总数 571
×
dengdeng12
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: