持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

写在前面

在最近看了React之后，一直觉得学的懵懵然，虽然b站下面评论区有很多大佬的手写笔记，写的都很不错，但是我一直没有我想要的那种细无巨细，比如类式组件this指向问题的追根溯源，又比如三大实例属性简写的由来，总之我还是决定自己二刷张天禹老师的视频。做一份事无巨细的笔记。

那就让我们开始吧！

模块化与组件化

模块

1. 理解：向外提供特定功能的js程序, 一般就是一个js文件

2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

2. 为什么要用组件： 一个界面的功能更复杂

3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

开发者工具的安装

• 应用商店安装

搜索React Developer Tools

• 本地添加

记得打开开发者模式，选中添加的文件即可。

插件右下角会标识这个插件的安装来源是商店还是第三方文件。

• 插件图标

显示红色就代表项目没有打包上线，处于开发者模式。

• 未上线

• 已经上线

函数式组件

<script type="text/babel">
        //1.创建函数式组件
        function MyComponent(){
                console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
                
                return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
        }
        //2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))  
</script>

1. 注意：

• ReactDOM.render这里要写标签，不能直接写函数名

• 函数名要大写

• 函数标签要自闭合

2. 使用插件查看函数标签

3. this指向

console.log(this); 此处的this是undefined，因为babel编译后开启了严格模式

4. 执行过程

执行了ReactDOM.render(.......之后，发生了什么？

1.React解析组件标签，找到了MyComponent组件。

2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。