[转]React官方学习笔记

Origin
1、React并不会通过String类型的Html片段生成DOM
2、在componentWillReceiveProps中调用setState()不会触发re-render
3、componentWillUpdate中不能调用this.setState()
4、在通过Ajax获取到数据,调用this.setState()之前,应该通过this.isMounted()确定当前的component已经处在渲染完成的阶段
5、父组件到子组件通过props传递数据,子组件向父组件传递数据通过global event方式来处理,即在root element上接受所有子组件的事件处理
6、移动设备的touch事件需手动开启:React.initializeTouchEvents(true)
7、setState(data, callback)中的callback是在re-render完成之后调用的

FLUX
1、Dispatcher分发来自页面事件行为的事件名称和数据到全局的Store中
2、Dispather中要注册各种事件及其对应的行为(更新Store)
3、通过使用类似于MicroEvent.js这样的类库,为Store提供对象的事件行为,监听它的数据变化
4、在componentDidMount中注册Store的行为,在componentWillUnmount中解绑Store的行为

JSX
1、组件的变量名必须大写,用于区分原生的Html标签和自定义组件
2、用大括号包裹的js表达式来表示组件的属性,替代原生写法的双引号
3、如果想给最终装换成的HTML元素添加自定义的属性,必须用前缀"data-“
4、props应该作为不可变常量使用,不能component.props.foo = x 这样使用
5、<Component {…someObj} /> 可以将someObj中的所有属性写进Component的props中
6、<Component {…someObj} attr=“higherLevel" /> 中的attr属性会复写someObj中的同名属性
7、JSX封装了React的原生接口为类XML协议的语法,使之更加易于编写
8、获取父级的属性用this.props,获取内嵌的子元素用this.props.children
9、为防止XSS攻击,提供安全性,在插入原生的HTML时需使用

<span dangerouslySetInnerHTML={{__html: rawHtml}}>

10、css的内嵌写法style,必须接受一个对象,其key是css属性名,多单词属性采用小驼峰写法,如果需要添加浏览器厂商前缀,则该前缀的首字母必须大写
11、除指定的某些元素(http://facebook.github.io/react/tips/style-props-value-px.html
)外,style中的属性值如果是纯数字会添加’px’后缀,如{height: 10} 编译成 height: 10px
12、通过this.transferPropsTo( subComponent ) 将当前组件的所有props传递给它的某个子组件,也可以通过{...this.props}的方式传递

时间: 2024-10-12 17:26:53

[转]React官方学习笔记的相关文章

React+Redux学习笔记:React+Redux简易开发步骤

前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文章:Redux学习笔记:Redux简易开发步骤 而React+Redux是以上两部分结合起来,方便在React中使用Redux,专用库为React-Redux.js.React-Redux.js新增了一些新方法: Provider:容器跟组件,可直接把外部的state传递给所有子组件和UI组件: m

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

React Redux学习笔记

React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性概览 ant ant.design rekit 先记录两篇博文,等有时间,整理一篇

React Native学习笔记 -- 开发环境搭建

工欲善其事,必先利其器.这次主要介绍mac osx下React Native的开发环境的搭建. homebrew mac上的包管理工具,用于安装nodejs和其他一些工具软件,在terminal输入下面命令进行安装: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 如果在安装过程中遇到提示ACCES: permission denied(

React.js学习笔记(一):组件协同与mixin

组件协同: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>父子关系</title> </head> <body> <script src="react.js"></script> <script src="JSXTran

React Native学习笔记

React 是使用ES6 ,支持JSX语法, 开发组件化web或native的工具. 现阶段使用Babel工具转换成ES5 代码. 组件通过props属性传递不变化的内容,UI通过state属性变动来产生变化. React 一个界面框架, 数据的管理在js中比较麻烦, 容易混乱 . 有个redux库可以管理一个统一的数据存储点. 一个应用只有一个Store对象,内部是一个全局可随处访问的变量. Redux 的三个概念 : container, reduce, actions . 1. 创建con

React Native学习笔记之一

1:运行React Native报连接错误解决 解决方式: 在终端进入项目文件里,然后执行:(cd Pods/React; npm run start) 2:组件生命周期介绍 创建阶段 1. getDefaultProps 作用于组件类,也就是调用React.createClass()的时候被调用. 每次创建组件的时候执行且只执行一次,方式如 reload Js. 用来处理props的默认值. note : 如果在JS文件中定义了一个组件,但是没有使用它,此组件的getDefaultProps也

React.js学习笔记之事件系统

事件系统 React 标准化了事件对象,因此在不同的浏览器中都会有相同的属性. 组件createClass后创建的是许多方法组成的对象.组件中使用的方法分为React自有的方法与用户定义的方法.其中React自有方法是组件生命周期中的方法,如:render.componentWillUpdate.componentDidMount等.用户自定义的方法可以起符合JS命名规范的方法就可以(最好使用驼峰命名),如:handleClick.handleChange.handleMouseover等. 事

react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup.html#content 1.安装Jdk(最好默认安装路径尽量别改) http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html http://www.jb51.net/article/36811.htm(三个环境变量都配置)  Ja