React

什么是组件化开发？ 不把页面逻辑写在一个jsx文件中，根据页面结构和复用度将页面结构拆分成不同的组件，由组件组成页面。 组件化开发是一种分而治之的思想，页面拆分组件，组件管理自己内部逻辑。被多处使用。

create-react-app脚手架把webpack等配置文件全部隐藏，具体是在react-scripts中。如果我们想要查看或者修改，有两种方式： 方式一：node_modules下修改： 方式二

脚手架使用背景 前端开发应用不再是单一的简单页面，是大型应用。 开发过程来说：多人协作，模块化开发，模块之间通过引用的形式，做到开发互不干扰 开发技术来说：模块化用到es6的导入导出。css使用scs

数组操作方式： 数组作为state中一项,操作时，最好先浅拷贝一份，最后通过setState赋值为拷贝项。 切勿直接操作state中数组的值 组件render函数内条件渲染，可以分别抽取不同条件下的r

接上篇，通过React.crateElement创建出来的是一个reactElement对象，它是一个js Object类型的对象，在控制台打印，如下图，描述了节点之间的嵌套关系，形成了一个关于节点嵌

介绍JSX为何能让浏览器识别，渲染DOM和页面。 先看下JSX代码： 在组件的render函数中返回了html结构代码。 浏览器渲染结果： 真相是什么？ babel的功劳。babel把JSX代码通过R

案例：默认显示文案，点击按钮隐藏，再点击显示 思路：定义控制展示与否的state.show.点击按钮修改show.JSX内容依赖show展示。 现在讨论JSX依赖show展示的几种方式： 方式一： r

react条件渲染，使用和普通js代码一致，使用if(vue: v-if/v-show) 根据条件，给变量赋值，变量在render中使用 三元运算，适合简单内容展示 逻辑与 适合依赖接口返回的值作渲染

JSX中event对象，与传统event对象有点区别，react对浏览器的event对象做了包装。 bind传参数问题 存在这样的问题，实参第一位丢失，实参从第二位开始，依次赋值给函数形参第一位开始，

原生DOM中事件绑定 方式一：获取元素，通过addEventListener('click', function(){}) 方式二：按钮的onclick React中事件绑定 两步骤： DOM原生事件

注释 不同数据类型在JSX内的展示 情况一：string， number， array类型的数据，可以作为内容直接展示（array默认join(',')） 情况二：null, undefined,Bo

学什么？ 认识JSX 以上图为例，将一段html赋值给一个变量，这种语法在普通<script>中会报错。但是在<script type="text/babel">中能正常解析。其中，html赋值给js

https://snippet-generator.app/ https://snippet-generator.app/ https://snippet-generator.app/

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5a4ab6910bf43f1b208bc34f7fe9313~tplv

前言 事件绑定：react的事件绑定，要自己处理this值，因为react的this不是DOM元素,而是Element

不用组件化的问题 从上个例子我们可以看到，react的程序主要做了以下几件事情： html中有一个id=rootDOM元素 通过react创建root 作为虚拟DOM根节点 然后通过这个节点的rend

案例：界面显示 hello world,点击按钮，文案变成hello react 依赖引入 引入3个依赖： react： react核心代码 react-dom:dom渲染相关，之前这个包是在reac

react介绍和特点 hello react案例 react 开发依赖分析 react 组件化封装 react 数据事件处理 react 其他案例实现 react介绍（技术角度） 用于构建用户界面的j

如何学习？ 1 官方文档 如何抓住重点（） 实战演练（每学一个知识点，要做练习） 查阅手册（百度的有些问题的说法是错误的，一定要以官网为主，但是目前没什么特别推荐的书籍） 2 看书学习 书的质量必须很

react是什么？ 用于构建用户界面的javascript库 react在前端地位？ 最流行的前端JS框架： vue：国内市场占有率最高，大概80%，几乎所有岗位对vue都有要求。 react：国内和