React 开发注意事项,注意点
react优势:
- 仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。
- 数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。
- React 都是关于构建可复用的组件,使代码复用、测试和关注分离(separation of concerns)更加简单。
注意点:
- 加载组件的首字母大写,比如:<HeaderComponent />
- 每一个组件的render最外层都要有一个包裹元素
- this.props不能修改,this.state可以修改
- 页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件
- string转换成html,dangerouslySetInnerHTML={{__html: ''}}
- 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 开发注意事项,注意点的更多相关文章
- React 开发注意事项
引用自定义组件的时候,组件名称首字母大写 import CustomComponent from "./customComponent "; render(){ return ( ...
- React开发入门:以开发Todo List为例
目录 概述 React基本概念 JSX是什么? 设置React APP 初始化APP 应用结构 探索第一个React组件 index.js 变量和props JSX中的变量 组件props props ...
- delphi 串口 关于RS485总线通信协议开发注意事项
http://blog.csdn.net/shjhuang/article/details/9426739 关于RS485总线通信协议开发注意事项 1 前言 近段时间发现我们系统在进行设备 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- win7虚拟打印驱动开发注意事项
win7虚拟打印驱动开发注意事项 通过控制面板安装遇到以下问题:错误1.提示“Printer driver was not installed. Operation could not be comp ...
- React开发项目例子
一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...
- Atom编辑器之加快React开发的插件汇总
汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全 autocomplete-js- ...
- MUI开发注意事项
mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...
- 用Inferno代替React开发高性能响应式WEB应用
什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...
随机推荐
- MYSQL的增删改查语句样码
慢慢来,慢慢来.. 增: INSERT INTO person (person_id, fname, lname, gender, birth_date) VALUES (null, 'William ...
- 无废话ExtJs 入门教程十一[下拉列表:Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- Unreal Engine4 学习笔记1 状态机 动画蓝图
1.动画蓝图 包含 状态机 包含 混合空间BlendSpace,即状态机包含在动画蓝图的"动画图表中",而混合空间可用于在状态机中向某(没)一个状态输出最终POSE: 动画蓝 ...
- 攻城狮在路上(壹) Hibernate(六)--- 通过Hibernate操纵对象(上)
一.Hibernate缓存简介: Session接口是Hibernate向应用程序提供的操纵数据接口的最主要接口,它提供了基本的保存.更新.删除和加载Java对象的方法. Session具有一个缓存, ...
- form表单中的submit点击时阻止提交
在form 中增加onsubmit="return false;"属性.
- 思想&观点&人生
思想: 思想的直接表现往往是对事物的观点,观点越多并且越接近本质,表示思想越丰富和深刻 观点不是事实 观点是基于事实之上的一种系统性的判断和理解框架,事实是观点的基础 观点不一定正确 观点组成: 事实 ...
- 细说static关键字及其应用
场景 先看段代码,考虑以下场景,其运行结果是什么? public class Test { static int i = 8; public void printI() { int i = 88; S ...
- Quick-Cocos2dx 快速了解
set_dev_envirment // */ // ]]> Cocos2dx快速了解 1. Quick-Cocos2dx 开发环境搭建 1.1. 官网: 1.2. Github: 1.3. s ...
- SQL多表查询案例
表结构: emp表: dept表: salgrade表: (1)查出至少有一个员工的部门.显示部门编号.部门名称.部门位置.部门人数. SELECT z.*,d.dname,d.loc FROM de ...
- 【MongoDB】2.可视化工具的安装和使用
首先:关于 能支持MongoDB新版本的可视化工具,争议不断,各人都有各人的支持. 因此之前选择安装的时候就安装了MongoDB 3.0.14版本的. 最终,确定使用Robomongo作为我第一个 ...