React学习随笔

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处理,替代方案为使用非受控组件;
,

生如夏花般绚烂,死如秋叶般静美
原文地址:https://www.cnblogs.com/muTing/p/9502973.html