react学习

核心概念

JSX简介

• 既不是字符串也不是html，具备完整的JavaScript功能

• 为什么使用JSX？

  • JSX没有采用标记分离认为的将标记与逻辑分离到不同的文件，而是将两者放在称为组件的松散耦合单元中，来实现关注点分离
  • react不强制使用JSX，但在视觉上有辅助作用，还可以是react显示更过的错误信息和警告。

• 表达式的嵌入使用大括号{}

• JSX也是一个表达式

• 特定属性指定为字符串字面量

• JSX指定子元素（）包裹html

• JSX有效防止xss，可以安全的输出用户输入，因为在渲染前内容会被转成字符串

• JSX表示对象React.createElement()

元素渲染

• 元素是构成react应用的最小砖块

• 通过ReactDOM.render()来渲染元素，接收待渲染的元素和根节点。元素更新只需要将新的元素传入ReactDOM.render()

• React只更新改变的内容

组件和props

• 组件允许你将UI拆分为独立的可复用的代码片段，为每个片段进行独立构思

• 函数组件和class组件

• 自定义组件必须大写字母开头，小写字母一律认为是原生DOM标签

• props只读性

state和生命周期

• state和props类似但state是私有的，完全受控于当前组件

• class组件渲染只会创建一个实例，这就使得我们可以使用state和生命周期方法等很多其他特性。

• componentDidMount componentWillUnmount this.setState()

• state的更新可能是异步的，所以不要依赖state的状态去更新下一个状态

事件处理

• react事件名采用小驼峰，而不是纯小写

• 需要传入函数而不是字符串

• 必须使用e.preventDefault()阻止默认行为，而不能通过return false

• e是一个合成事件， 不用担心跨浏览器的兼容性问题了

条件渲染

• 阻止组件渲染，return null

列表和key

• JSX支持在{}内嵌入任何表达式，因此我们可以嵌入map返回的结果

表单

• 受控组件与非受控组件

状态提升（vue中父子组件通信）

组合（vue中slot）