React官网:https://facebook.github.io/react/
1.JSX语法
React拥有独有的JSX语法,JSX语法允许HTML与JavaScript混写。
JSX的基本规则:遇到以<开头的(HTML标签)就用HTML规则解析;遇到以{开头(代码块)就用JavaScript规则解析。
JSX允许直接在模板插入JavaScipt变量,如果变量是一个数组,则会展开这个数组的所有成员。
2.组件
React 可以将代码封装成组件,然后像引入HTML标签一样引入组件。
组件都必须有render方法来输出组件,render方法只能有一个顶层标签,否则会报错。
组件类的首字母都必须大写,否则会报错。
3.this.props
this.props可以回去到使用组件时组件的属性,但是其中this.props.children属性例外,它表示组件组件的所有子节点。
this.props一旦定义就不可改变。
4.PropTypes(React 15.5版本后弃用了React.PropTypes ,如要使用则从 prop-types库引入)
该属性用来验证组件是你的属性时候符合要求.更多PropTypes可查看官网
getDefaultProps方法可以用来设置组件属性的默认值。
5.获取真实节点
组件是一种叫做虚拟DOM的存在于内存中的数据结构,多有的DOM变动都是先在虚拟DOM上发生,然后再将实际发生变动部分
如果需要从组件中回去真实的DOM就要用到 ref 属性。
由于 ref属性获取的时真实的DOM,所以必须等到虚拟DOM插入文档后才能使用这个属性,否则会报错
6.this.state
this.state改变以后就会再次渲染组件
this.state会随着与用户交互而发生变化
7.表单
因为this.props一旦定义是不可改变的,所以表单这种属于用户在与组件交互的就不能使用this.props,而是用过使用事件来传入event.target.value来读取填入的值
8.style
组件的style属性要写为style={{name:value}}
因为React组件样式是一个对象,多以第一个大括号是JavaScript语法,第二个大括号表示样式对象
该博文参考 阮一峰老师的《React 入门实例教程》