之前都是直接上手写React的项目,对React的很多细节跟原理的理解还是不够透彻,今天开始看文档去理解React,并简单的做做笔记
https://react.docschina.org/docs/getting-started.html
JSX
JSX是语法糖,也是一个表达式.
React.DOM使用小驼峰定义JSX属性名称,如class=>className.
JSX表示对象
个人理解就是虚拟DOM
React元素
元素是构成 React 应用的最小砖块。
ReactDOM.render():将一个元素渲染为 DOM
React组件与Props
函数组件与类组件
React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”。
Props的只读性:组件不能修改自身的 props
State & 生命周期
state就是状态.
使用setState修改state
setState可以接收一个函数
组件可以选择把它的 state 作为 props 向下传递到它的子组件中(“自上而下”或是“单向”的数据流)
组件第一次被渲染到 DOM 中的时候,就为其设置一个计时器。这在 React 中被称为“挂载(mount)
组件被删除的时候,应该清除计时器。这在 React 中被称为“卸载(unmount)
事件处理
传函数做事件处理函数
this.handlClick=this.handleClick.bind(this);传的时候写onClick={this.handleClick}
如果没有绑定this,传的时候写onClick={this.handleClick()}
最简单就箭头函数onClick={()=>this.handleClick()}
**
条件渲染
**
逻辑与 (&&) 运算符。三目运算符
列表和Key
巧用遍历方法,map.reduce来渲染列表
列表最好用key,key最好用id而不是index
key在兄弟节点之间必须唯一
元素的 key 只有放在就近的数组上下文中才有意义。(key的值由父传下来)
比方说,如果你提取出一个 ListItem 组件,你应该把 key 保留在数组中的这个 元素上,而不是放在 ListItem 组件中的