react优势:

  • 仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。
  • 数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。
  • React 都是关于构建可复用的组件,使代码复用、测试和关注分离(separation of concerns)更加简单。

注意点:

  1. 加载组件的首字母大写,比如:<HeaderComponent />
  2. 每一个组件的render最外层都要有一个包裹元素
  3. this.props不能修改,this.state可以修改
  4. 页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件
  5. string转换成html,dangerouslySetInnerHTML={{__html: ''}}
  6. getInitialState:在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
    getDefaultProps:在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)。

    该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。

组件的生命周期:

  componentWillMount:

    服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。
  componentDidMount:

    在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。
  componentWillReceiveProps:

    在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。
  shouldComponentUpdate:

    在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。

如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false
  componentWillUpdate:

    在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
  componentDidUpdate:

    在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

  componentWillUnmount:

    在组件从 DOM 中移除的时候立刻被调用。

React 开发注意事项,注意点的更多相关文章

  1. React 开发注意事项

    引用自定义组件的时候,组件名称首字母大写 import CustomComponent from "./customComponent "; render(){ return ( ...

  2. React开发入门:以开发Todo List为例

    目录 概述 React基本概念 JSX是什么? 设置React APP 初始化APP 应用结构 探索第一个React组件 index.js 变量和props JSX中的变量 组件props props ...

  3. delphi 串口 关于RS485总线通信协议开发注意事项

    http://blog.csdn.net/shjhuang/article/details/9426739 关于RS485总线通信协议开发注意事项 1       前言 近段时间发现我们系统在进行设备 ...

  4. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  5. win7虚拟打印驱动开发注意事项

    win7虚拟打印驱动开发注意事项 通过控制面板安装遇到以下问题:错误1.提示“Printer driver was not installed. Operation could not be comp ...

  6. React开发项目例子

    一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...

  7. Atom编辑器之加快React开发的插件汇总

    汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全  autocomplete-js- ...

  8. MUI开发注意事项

    mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...

  9. 用Inferno代替React开发高性能响应式WEB应用

    什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...

随机推荐

  1. 【JAVA多线程安全问题解析】

    一.问题的提出 以买票系统为例: class Ticket implements Runnable { public int sum=10; public void run() { while(tru ...

  2. [LeetCode] Happy Number

    Happy Number Total Accepted: 35195 Total Submissions: 106936 Difficulty: Easy Write an algorithm to ...

  3. Linq To Sql中实现Left Join与Inner Join使用Linq语法与lambda表达式

    当前有两个表,sgroup与sgroupuser,两者通过gKey关联,而sgroup表记录的是组,而sgroupuser记录是组中的用户,因此在sgroupuser中不一定有数据.需要使用Left ...

  4. ImageSwitcher自定意效果+定时切换图片

    Activity实现 1 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; ...

  5. [Eclipse] Eclipse字体问题解决

    背景: Eclipse的字体总感觉有点问题,其中中文字体太小,不方便查看,今天网上搜索了一下,解决了问题,记录下来: 解决办法: Window --> Preferences --> Ge ...

  6. Linux命令之ar - 创建静态库.a文件和动态库.so

    转自:http://blog.csdn.net/eastonwoo/article/details/8241693 用途说明 创建静态库.a文件.用C/C++开发程序时经常用到,但我很少单独在命令行中 ...

  7. matlab练习程序(碎片)

    这个算法是对photoshop中滤镜->像素化->碎片这个功能的学习. PS这个功能好像不带参数,不过我这里有滤波半径r可以进行控制. 因为我是看效果猜算法的,效果肯定有所区别. 我的想法 ...

  8. 遍历注册表回调函数(仿PCHunter CmpBack)

    遍历注册表回调函数(仿PCHunter CmpBack) typedef struct _CAPTURE_REGISTRY_MANAGER { PDEVICE_OBJECT deviceObject; ...

  9. Java学习随笔4:Java的IO操作

    1. IO流的作用是读写设备上的数据,如硬盘文件.内存.键盘.网络等.根据数据走向,可分为:输入流和输出流:根据处理的数据类型,可分为:字节流和字符流.字节流可以处理所有类型的数据,如MP3.图片.视 ...

  10. 从客户端(CourseIssueContent="<P>财务审计师岗位认证招生简章<BR>...")中检测到有潜在危险的 Request.Form 值。

    说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示危及应用程序安全的尝试,如跨站点的脚本攻击.通过在 Page 指令或 配置节中设置 validateRequest ...