##JSX
JSX
是js
语法拓展。- 在
JSX
/JSX属性
中嵌入表达式 使用{}
包裹起来。 React DOM
在渲染所有输入内容之前,默认会进行转义,防止xss攻击。JSX
中当一个标签里面没有内容,可以使用/>
闭合标签。JSX
会被babel
编译为React.createElement(标签名,属性对象,节点内容)
函数调用。
##元素渲染
- 通过这种方式将元素渲染为DOM
ReactDOM.render(JSX,根节点);
。 React元素
被创建后无法被改变,如想更新只能重新渲染。React
只更新变化的部分。
##组件
- 定义组件的两种方式
函数组件
/类组件
。 - 可以通过组件属性传入参数,函数组件通过
函数参数
接收props
,类组件通过constructor参数
接收props
。 - 组件可以嵌套。
- props是只读的。
##生命周期
- 挂载 mount componentDidMount
- 卸载 unmount componentWillUnMount
##state
- 通过
super
继承到父类的构造函数,通过调用setState
来修改state
组件会自动重新渲染。 - state的更新可能是异步的,所以在setState中使用state中的值进行计算可能导致一些问题,针对这个问题可以在setState中传入一个函数参数分别为:上一个state 和 此次被更新应用时的props。
- setState中传入的对象会被合并到state中。
- state是局部的,所有组件都无法知道其他组件是否有状态,组件可以把state作为props向下传递到子组件中,但子组件并不能判断出props是否来自父组件的state。
##事件处理
- react中的事件使用小驼峰的命名方式(camelCase)。
- react中的事件不能通过返回false阻止默认行为,必须使用
preventDefault
。 - react中的事件在JSX语法中需要传入一个函数而不是字符串。
- 为了在回调中可以使用
this
必须在初始化时.bind(this)
。 - 如需要向回调中传递额外的参数可以使用箭头函数,或者
bind(this,id)
。
条件渲染
- 可以使用变量储存元素,例子:
render(){ let flag = true; let button = <a>click</a>; return ( <div> {flag?button:""} </div> ); }
- JSX中可以使用短路代理三元运算符 例子:
flag && <h1>aaa</h1>
。 - render方法返回
null
则不会渲染。
##列表
- 一般使用
map
生成组件列表。 - 列表的每一项应该有唯一的
key
。 key
在兄弟节点之间必须唯一,不必是全局唯一的。props
中无法拿到key
属性。
##表单
非受控组件
:不走state直接从组件中获取值。受控组件
:将值保存在state中,集中管理,类似于双向绑定。- 使用函数柯里化将不同的元素值统一处理保存