python组件的react实现_【React源码解读】- 组件的实现

前言

react使用也有一段时间了，大家对这个框架褒奖有加，但是它究竟好在哪里呢？

让我们结合它的源码，探究一二！(当前源码为react16，读者要对react有一定的了解)

回到最初

根据react官网上的例子，快速构建react项目

npx create-react-app my-app

cd my-app

npm start

打开项目并跑起来以后，暂不关心项目结构及语法糖，看到App.js里，这是一个基本的react组件 我们console一下，看看有什么结果。

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

Edit src/App.js and save to reload.

);

}

}

export default App;

console.log()

可以看到，组件其实是一个JS对象，并不是一个真实的dom。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。有兴趣的同学可以去阮一峰老师的ES6入门详细了解一下

上面有我们很熟悉的props,ref,key,我们稍微修改一下console，看看有什么变化。

console.log(

你好，这里是App组件

)

可以看到，props,key都发生了变化，值就是我们赋予的值，props中嵌套了children属性。可是为什么我们嵌入的是div，实际上却是一个对象呢？

打开源码

/node_modules/react

首先打开index.js

'use strict';

if (process.env.NODE_ENV === 'pro