专栏首页ThoughtWorks秒懂ReactJS | TW洞见

秒懂ReactJS | TW洞见

今日洞见

文章作者/配图来自ThoughtWorks:贾朝阳。

本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。已经本网协议授权的媒体、网站,在使用时必须注明"内容来源:ThoughtWorks洞见",并指定原文链接,违者本网将依法追究责任。

这篇文章是为ReactJs小白准备的,希望他们快速抓住ReactJs的要点并能在实践中随机应变。

两句话版本

  • ReactJs把视图更新简化为一个render函数
  • render函数接收两个参数,分别是配置项和状态

长版本

ReactJs是一个专注于View的Web前端框架。Web前端的View就是浏览器中的Dom元素,改变View的唯一途径就是修改浏览器中的Dom元素,因此ReactJs的核心任务就是如何修改Dom元素,作为一个成功的框架,ReactJs使修改Dom元素变得高效而又简单。

ReactJs把修改Dom的操作简化成一个函数renderInto(parentDom, props, states)=>htmlString,这个函数的意图就是根据props,states计算出视图对应的html字符串并添加为parentDom的子节点。props和states就是普通的javascript对象,这个函数的核心逻辑就是计算html元素的机构及元素属性然后拼接成字符串返回。作为框架,ReactJs用JSX形式的DSL解决了拼接html的任务并接管了更新到parentDom的职责。看一个例子,理解这个函数并理解ReactJs怎么使用这个函数你就可以一个人开始ReactJs之旅了。

var props = {name: 'myname'};  
var states = {amount: 1000};  


function render(props, states) {  
  var title = ’Hello, ' + props.name;  
  var description = 'You have ' + states.amount + ' score now.';  


  return (  
    <div className="score-board">  
       <h1>{title}</h1>  
       <p>{description}</p>  
    </div>  
  );  
}

函数第一行根据props计算title,第二行根据states计算description,最后以JSX形式返回拼接好的html字符串。

如果你用过AngularJs,EmberJs等类似的前端框架,你可能会觉得没什么了不起,不就是把模板和逻辑放到一起吗?是的,没错,但这不仅仅是组织形式上的改变,而是编程隐喻的转变—从复杂的MVC或MVVM模式到简单的render函数。还有一点不同是JSX最终编译成调用react-dom的javascript语句,而不是直接生成字符串。

render函数还只是ReactJs这座冰山的一角,”React”会在render函数的输入变化时再次调用这个函数。再看一个例子。

var props = {name: 'myname'};  
var states = {amount: 1000};  


function handleClickAdd() {  
  states = {amount: states.amount + 1};  
}  


function render(props, states) {  
  var title = ’Hello, ' + props.name;  
  var description = 'You have ' + states.amount + ' score now.';  


  return (  
    <div className="score-board">  
       <h1>{title}</h1>  
       <p>{description}</p>  
       <button onClick={handleClickAdd}>+1</button>  
    </div>  
  );  
}

这个例子增加了一个“+1”按钮,当用户点击按钮时会修改states,ReactJs在states变化时的”React”就是再次调用render函数,然后用新输出更新浏览器的dom。

可能你会问,props和states不就是Model吗?是的,可以理解成Model,但此Model非彼Model,props和states都是为View服务的而非和View平起平坐。

可能你还会问,为啥不把props和states合并成一个对象?要回答这个问题,就涉及到复杂视图的场景。想想看,当视图内的元素不断增加时,代码上如何处理,还要在一个render函数里折腾吗?肯定不会。我猜你已经想到了,要把大问题拆小。ReactJs给出的解决方法就是把大视图拆成若干个小视图,每个视图都有自己的render函数,在JSX中可以直接使用视图标签。看一个例子。

var Score = React.createClass({  
  initialState: function() {  
    return {amount: 1000};  
  },  


  function handleClickAdd() {  
    this.setState({amount: this.states.amount + 1});  
  }  


  render: function() {  
    var title = ’Hello, ' + this.props.name;  
    var description = 'You have ' + this.states.amount + ' score now.';  


    return (  
      <div className="score-board">  
         <h1>{title}</h1>  
         <p>{description}</p>  
         <button onClick={handleClickAdd}>+1</button>  
      </div>  
    );  
  }  
});  


var ScoreList = React.createClass({  
  render() {  
    return (  
      <ul className="score-list">  
        <li><Score name="Tom" /></li>  
        <li><Score name="Jerry" /></li>  
      </ul>  
    );  
  }  
});  


ReactDOM.render(  
  <ScoreList />,  
  document.getElementById('content')  
);

这个例子中有两类View,分别是Score和ScoreList。ScoreList的render函数中使用Score标签并给出配置项name的值。详细看一下Score,ReactJs提供createClass方法定义视图,在render函数中通过this.props访问外部传入的配置项,通过this.states访问视图内部的状态。从意图上看,props外部传入视图的配置项,拥有者是父视图,视图内部只能读取配置项,states的拥有者是视图自身。

区分props和states的结果就是,子视图没办法直接改变父视图,视图改变一定是自触发改变的视图开始向子视图传播。对上面的例子,当Tom的Score改变时,ScoreList其他部分一定不会改变,所以视图更新从Tom的Score视图开始就可以,这就保证了能更高效地计算视图变化,再加上VirtualDom的使用,使ReactJs的效率大大超过其他框架。

当子视图需要改变父视图时,也一定是从父视图开始向下更新。假如上面的例子中ScoreList还有平均分的视图,当Tom的分数改变时,需要更新ScoreList中的平均分。这就需要Score视图在处理”+1”输入时把变化通知到ScoreList,做法时给Score增加配置项,ScoreList中定义更新平均分的函数并把函数作为配置项传给Score。当ScoreList更新时,因为Jerry的props和states都没变化,所以Jerry的Score视图不需要更新。

这就是ReactJs的全部秘密了(不过Web前端本身是一个复杂系统,你还需要了解更多其他内容)。


本文分享自微信公众号 - 思特沃克(ThoughtWorks),作者:贾朝阳

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-05-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于质量,大家都在关注什么?

    去年,我们在《数字化时代的软件测试》中看到了2017年软件质量方面的趋势和给测试人员的建议。又一年过去了,大家对软件质量保障和测试的关注有哪些变化呢?我们一起来...

    ThoughtWorks
  • 软件测试人员的挑战与机遇

    “ThoughtWorks技术雷达上都是开发相关的内容,测试相关的内容越来越少...”

    ThoughtWorks
  • TW洞见|满足善变用户:追求用户价值覆盖率,而不是....

    今日TW洞见 文章作者及图片来自ThoughtWorks:伍斌。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、...

    ThoughtWorks
  • 使用 BPF 改变运行中的程序的函数参数

    注意到我们使用 //go:noinline 修饰了 main.greet 函数,防止被编译器内联,方便进行测试验证。

    ritchiechen
  • 一天一大 lee(有序链表转换二叉搜索树)难度:中等-Day20200818

    本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1。

    前端小书童
  • 基于bmob快速搭建小程序用户模块

    客户端调用wx.login()后获取的code,后端人员拿到code和微信换取openid和session_key;

    疯狂的小程序
  • 跟我学Spring Cloud(Finchley版)-09-Feign

    经过前文讲解,我们已使用Eureka实现服务发现;使用Ribbon实现了负载均衡这种听起来很高端的东西。我们的架构已经初具雏形,但依然存在很多问题,下面不妨来分...

    用户1516716
  • 知乎:源自社区又服务于社区的 AI 技术

    每次知乎的技术负责人公开谈及人工智能技术,「智能社区」都是一个绕不开的词汇。然而「智能社区」也是一个相对陌生的概念:如今研究者与工程师们明确了深度神经网络在语音...

    机器之心
  • python 游戏(数字推理游戏Bage

    实现功能:玩家猜测三位不一样的数字,猜错了有提示,提示分别为(位置错误数字正确),(位置和数字正确),(数字和位置都不正确)

    py3study
  • 数据压缩----霍夫曼树和霍夫曼压缩

    SuperHeroes

扫码关注云+社区

领取腾讯云代金券