JSX语法
可以写任意表达式，用花括号包裹；
元素渲染
ReactDOM.render(元素对象/组件，挂载目标对象)
react对于重新创建或加载的元素，只更新改变的部分。
组件
react组件中，‘class’属性要写成'className'
组件可以用函数定义（接收props并返回展示在页面的元素，无状态组件）；或用类来定义，可以使用局部状态、生命周期钩子；
组件名称必须以大写字母开头；
组件返回值只能有一个根元素，组合元素中在最外层用div包裹；
组件不能修改它的props; props应从组件自身的角度命名而不是上下文；
props/state
props是实例对象的属性集合对象；
state是私有的，完全受控于当前组件；只适用于类；
state初始化只能在类的构造函数中；
state更新必须用setState()，传入更新后的state对象；
使用setState()可以使组件进行必要的重新渲染；可以独立地更新state中的变量；也可以接收一个函数，根据之前的状态计算下一个状态；
生命周期(待补充)
componentWillMount
componentWillUnmount
componentDidMount
componentWillReceiveProps
componentWillUpdate
事件处理
事件绑定属性的命名用小驼峰方法；JSX中，如onClick={handler},传入函数；
ES6 class语法不会自动绑定this，推荐使用构造函数中绑定或属性初始化器语法，将this对象绑定；
向事件处理程序传递参数，时间对象event要排在其他参数的最后；
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row
<button onClick={this.deleteRow.bind(this, id)}>Delete Row
条件渲染
传统：if判断语句
jsx: &&短路操作符；可以根据条件判断显示或隐藏；
return (<p>{false && "Please Login"}</p>）p标签中无内容；
三目操作符；可以根据条件转换显示内容；
return (
<div>
{isLogin ? (<UserGreeting />) :
(<GuestGreeting />) }
</div>
)
设置render方法返回为null也可以隐藏组件，不影响生命周期函数的回调。
列表，keys
列表的每一项都应该有一个独一无二的key；
key只和兄弟节点之间对比；需唯一；
key需要在数组的上下文中定义，不要在单项组件的内部定义；
key不会在props中传递
function ListItem(props) {
return <li>{props.value}</li>
}
function NumberList(props) {
const numbers = props.numbers;
const list = numbers.map((number) => <ListItem value={number.toString()} />);
return (
<ul>{list}</ul>
)
};
表单
一般使用受控组件；
如果让表单数据由DOM处理，替代方案为使用非受控组件；
,
posted on
