开始学习理解React文档

之前都是直接上手写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 组件中的

• 元素上。

• 表单

  

  状态提升

  简单说就是有父组件,子组件1,子组件2
  父组件将值(父组件state中)和与操作方法(函数)作为props传给他们,