React源码解析————前言

2021SC@SDUSC

2021SC@SDUSC

React概述

1.React是什么：
react由facebook公司推出，因为该公司不满足于市面上现有的前端框架，他们认为MVC只会让前端越来越复杂，因此react就诞生了，react只关注与视图层，官方对react的定位是：一个快速构建前端视图的javaScript库。

React的特点

声明化

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试.

组件化

构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

一次学习，随处编写

无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用

React创建组件

函数组件

		function MyComponent(){
			return 
我是用函数定义的组件
		}
		//2.渲染组件到页面
		ReactDOM.render(,document.getElementById('xxx'))

class组件

class MyComponent extends React.Component {
			render(){
				return 
我是用类定义的组件
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(,document.getElementById('xxx'))

React组件实例的三大属性

props

class Person extends React.Component{
			render(){
				return (
					

						
姓名：{this.props.name}
						
性别：{this.props.sex}
						
年龄：{this.props.age}
					
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(,document.getElementById('xxx'))
		ReactDOM.render(,document.getElementById('xxx'))

		const p = {name:'老刘',age:18,sex:'女'}
		ReactDOM.render(,document.getElementById('xxx'))

state

//1.创建组件
		class Weather extends React.Component{
			state = {isHot:false,wind:'狂风'}

			render(){
				const {isHot,wind} = this.state
				return 
今天天气很{isHot ? '炎热' : '凉爽'}，{wind}
			}
			changeWeather = ()=>{
				const isHot = this.state.isHot
				this.setState({isHot:!isHot})
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(,document.getElementById('xxx'))

ref

//创建组件
		class Demo extends React.Component{
			/* 
				React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
			 */
			myRef = React.createRef()
			myRef2 = React.createRef()
			//展示左侧输入框的数据
			showData = ()=>{
				alert(this.myRef.current.value);
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				alert(this.myRef2.current.value);
			}
			render(){
				return(
					

						 
						点我提示左侧的数据 
						 
					
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(,document.getElementById('xxx'))

React主要模块

React Core 核心API（鄙人负责分析）

React Core 中定义了所有全局 React API，比如：
React.createElement()
React.Component
React.Children
因此 React Core 只包含定义组件必要的 API。它不包含协调算法或者其他平台特定的代码。它同时适用于 React DOM 和 React Native 组件。

React 核心代码对应源码的 packages/react 目录中。最终以react包发布在npm上，并被build为 react.js 运行在浏览器环境中，它会导出一个称为 React 的全局对象。
ps：若使用vs code看源码有爆红，在.vscode文件夹下找到settings.json文件，向里面添加：

"javascript.validate.enable": false

大概率解决问题

Renderers 渲染器

React 最初只是服务于 DOM，但是这之后被改造成能同时支持原生平台的 React Native。因此，在 React 内部机制中引入了“渲染器”这个概念。

渲染器用于管理一棵 React 树，使其根据底层平台进行不同的调用。

React DOM Renderer 将 React 组件渲染成 DOM。它实现了全局 ReactDOM API，这在npm上发布为 react-dom 包。这也最终被build为 react-dom.js 在浏览器环境中使用，导出一个 ReactDOM 的全局对象。它对应于源码的 packages/react-dom。

React Native Renderer 将 React 组件渲染为 Native 视图。此渲染器在 React Native 内部使用。它对应于源码的packages/react-native-renderer。

Reconcilers 协调器

即便 React DOM 和 React Native 渲染器的区别很大，但也需要共享一些逻辑。特别是协调算法需要尽可能相似，这样可以让声明式渲染，自定义组件，state，生命周期方法和 refs 等特性，保持跨平台工作一致。

为了解决这个问题，不同的渲染器彼此共享一些代码。我们称 React 的这一部分为 “reconciler”。当处理类似于 setState() 这样的更新时，reconciler 会调用树中组件上的 render()，然后决定是否进行挂载，更新或是卸载操作。

在React 15 之前，主要使用的 Reconciler 是 Stack reconciler，目前官方已经停止了对其的使用。从 React 16 开始，React采用了 Fiber reconciler 作为默认的协调器，同时解决了 stack reconciler 中固有的问题。

它的主要目标是：

• 能够把可中断的任务切片处理。
• 能够调整优先级，重置并复用任务。
• 能够在父元素与子元素之间交错处理，以支持 React 中的布局。
• 能够在 render() 中返回多个元素。
• 更好地支持错误边界。
  Fiber reconciler 对应于源码的 packages/react-reconciler 目录。

想法

我对于React其实还是初学者，以前一直使用Vue的，但是由于老师的要求现在只好开始看起了React文档，现在算是会使用React开发个项目了，但是对于React 生态圈还是知之甚少，只能说加油努力吧。虽然我们小组分成三个模块方向去研究，但是React的源码却是彼此之间存在大量的references，在分析的日子里免不了相互借鉴，希望和他们一起共同研究。