文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. HTML VS ReactComponent
    2. 2.2. Spread Attributes
    3. 2.3. 节点遍历
    4. 2.4. PropTypes组件验证机制
    5. 2.5. ReactDOM.render()只能渲染一次
    6. 2.6. ref 获取真实dom属性
    7. 2.7. 组件重复调用
  3. 3. Reference

Defined

先写的React Native, 发现了好多坑.找到了个比较好的资料库, 跟着学, 在此记录所学知识.
所有代码均会在

Main()

HTML VS ReactComponent

1
2
3
4
render(
<h1>I'm original html tag</h1>,
<MyConponent/>
)

React组件首字母必须大写

Spread Attributes

在看其他代码的时候经常看到类似于<Button info>这种Component, 现在了解了: jsx的新特性-延展属性.
写了个小例子, 改得和ReactNative相似了许多~也添加了延展操作符(ES6特性也添加了延展操作符(ES6特性)也添加了延展操作符(ES6特性))

See the Pen SimpleReactBtnComponent by Quinn Sheng (@a1exlism) on CodePen.

节点遍历

this.props.children 会返回组件对象所有属性
React.Children.map / React.Children.forEach 可以遍历子节
应该对于代码复用效果挺好的.

PropTypes组件验证机制

用于检测props传入的数据是否符合规范.
类似错误如

Invalid prop title of type number supplied to MyTitle, expected string. in MyTitle

ReactDOM.render()只能渲染一次

原因: virtual-dom

ref 获取真实dom属性

例如: 获取点击事件(virtual dom做不了的)
这边有一个bind(this)的问题, 解释在这里:

http://blog.csdn.net/bingjay/article/details/53876773
React.createClass 是es5的写法默认是绑定了bind方法,而es6中 新增加了class,绑定的方法需要绑定this,如果是箭头函数就不需要绑定

组件重复调用

https://beace.gitbooks.io/react-recording/content/reactzhong_duo_ge_component_de_wen_ti_ji_lu.html
和react native基本一样, 需要在最外层套用一个<div>, 保证是一个组件

Reference

React Native之React速学教程

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. HTML VS ReactComponent
    2. 2.2. Spread Attributes
    3. 2.3. 节点遍历
    4. 2.4. PropTypes组件验证机制
    5. 2.5. ReactDOM.render()只能渲染一次
    6. 2.6. ref 获取真实dom属性
    7. 2.7. 组件重复调用
  3. 3. Reference