问题: create-react-app中的index.js中的ReactDOM做什么了?
解决:
- 将jsx语法装换成 VDOM模型,然后再VDOM渲染成真实DOM
- 将渲染出来的真实DOM,插入到容器id为root的标签内
问题: React的VDOM
- 数据更新会生成新的VDOM,新的VDOM和上一次的进行对比,生成的是一个patch对象
- VDOM仅仅会渲染不同的地方,相同地方不进行渲染( 惰性原则 )
- React 16版本以前使用的是diff算法
- 而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,
- 在react 16之后发布的一种react 核心算法,React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法。
- React Fiber的方法其实很简单——分片
两种组件
-
函数式组件 ( 无状态 组件 ) PureComponent
// 函数式组件 function App() { return ( <div className="App"> APP </div> ); } export default App; ``` - 函数式组件是一个纯函数,函数中接收一个参数叫做props, - 单是单纯的返回一段jsx - 这个组件中不书写逻辑( 比如事件 )
-
类组件
class DataComponent extends React.Component{ render(){ return( <div><div> ) }
问题: react中this指针的丢失
解决:
- bind(this)
- 将事件处理程序写成 箭头函数