## React-Fiber 不能让一个任务长期霸占着资源。 可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“进程”，需要通过某些调度策略合理地分配 CPU 资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率 React 通过Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了可以让浏览器及时地响应用户的交互，还有其他好处: > 分批延时对DOM进行操作，避免一次性操作大量 DOM 节点，可以得到更好的用户体验； > 给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修正。 核心思想: Fiber 也称协程或者纤程。它和线程并不一样，协程本身是没有并发或者并行能力的（需要配合线程），它只是一种控制流程的让出机制。让出 CPU 的执行权，让 CPU 能在这段时间执行其他的操作。渲染的过程可以被中断，可以将控制权交回浏览器，让位给高优先级的任务，浏览器空闲后再恢复渲染。 ## 组件声明 函数式定义的无状态组件 ES5原生方式React.createClass定义的组件 ES6形式的extends React.Component定义的组件 **（1）无状态函数式组件** 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作 组件不会被实例化，整体渲染性能得到提升，不能访问this对象，不能访问生命周期的方法 **（2）ES5 原生方式 React.createClass // RFC** React.createClass会自绑定函数方法，导致不必要的性能开销，增加代码过时的可能性。 **（3）E6继承形式 React.Component // RCC** 目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。 **无状态组件相对于于后者的区别：** 与无状态组件相比，React.createClass和React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。 ```js // 无状态函数式组件 -- 组件名首字母大写 function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) // React.createClass import React from 'react'; const Contacts=React.createClass({ render(){return (<div></div>); }}); export default Contacts; // 类组件 extends React.Component import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return (<h1>欢迎进入{this.props.name}的世界</h1>) } } ReactDOM.render( <App name="react" />, document.getElementById('root')) ``` - **React.createClass与React.Component区别** https://blog.csdn.net/wbiokr/article/details/73027398  ## 有状态组件/无状态组件