React - review 1

范轶
2023-12-01

一、 React 简介

  1. React Js => 可以用 React 的语法来编写一些网页的交互效果
  2. React Native => 可以让我们借用 React 语法编写原生的 app 应用
由Facebook推出
React Js
2013年开源
函数式编程
使用人数最多的前端框架
健全的文档与完善的社区
React Fiber => 16版本
  1. React Fiber => 指 React Js 的16版本,或16版本中的一些底层实现
            在16版本中 ,React 底层在数据循环中加入了优先级等一些概念 ,可以利用事件循环的一些碎片时间执行一些高优先级的用户交互 ,提高React Js 使用中的用户体验
  2. React 相对于 Vue :
            React 更加灵活,处理复杂的项目有更多的技术方案的选择;Vue 具有丰富的API,实现功能更加简单,由于API丰富导致灵活性受限制。所以 React 更适合做相对复杂的项目,Vue 更加适合轻量级的项目

二、 React 开发环境准备

  1. 使用 React Js 的两种方式
    1)通过 script 标签引入
    2)通过脚手架工具来编码(create-react-app <= React 官网提供)
  2. 创建项目:create-react-app my-app
  3. 启动项目:npm start

三、 React 工程目录文件简介

  1. README.md => 项目说明文件(可以通过 maekdown 语法自己写一些关于项目的介绍)
  2. package.json => node 的包文件,可以让项目变成一个 node 的包
  3. .gitignore => 当用 Git 管理代码时,有些文件不想传到仓库上,可以把这些文件定义在 .gitignore 中
  4. node_modules => 项目依赖的一些包
  5. src/index.js => 整个文件的入口文件
  6. public/index.html => html 模板

四、React 中的组件

  1. 通过 ReactDOM.render 将 React 生成的一些组件或内容挂载到某个节点上,让它显示出来
  2. 引入组件首字母大写,如:<App />
    普通的标签首字母小写,如:<input /> 、<span>
  3. 父子组件通信:
            父组件通过属性向子组件传值 ;子组件如果想操作父组件的数据,需要父组件向子组件传递一个方法,子组件去调用这个方法,间接的来操作父组件的数据

五、Jsx 语法需要注意

  1. dangerouslysetInnerHTML:可以让某些标签中的内容不被转义
  2. lable 标签的 for 属性 => htmlfor
  3. 类名class => className

六、围绕 React 衍生出来的思考

  1. 声明式开发 => 节省了大量的DOM操作
  2. 可以与其它框架并存
  3. 组件化
  4. 单向数据流
            父组件可以向子组件传值,子组件只能使用这个值,而不能去改变这个值 (很多子组件都使用了父组件传来的值,如果出现了问题,不知道是哪个子组件修改了父组件的值 ,需要一一查找)
            那么子组件如何修改父组件数据呢?-- 子组件调用父组件中的方法来修改
  5. 视图层框架
A
B
C
H
I
D
E
F
G

        如果要实现I组件与G组件之间的通信,需要G -> D -> B -> A -> C ->I 过于冗余,所以说 React 作为视图层,复杂的组件通信需要配合 redux 等框架
6. 函数式编程 => 易于维护,给前端自动化测试带来了方便

七、propTypes 与 DefaultProps 的应用

  1. propTypes :可以限制、要求父组件给子组件传过来的值的类型(不符合会报出警告,不影响执行)
	App.propTypes = {
	    test: TodoList.prototype.string.isRequire;  // 父组件必须向子组件传test
	    content: TodoList.prototype.string  // 可以不传
	}
  1. defaultProps:当父组件未给子组件传递 test ,而子组件要求必须传值的时候,可以使用defaultProps来设置默认值
	App.defaultProps= {
	    test: 'Hi React'
	}

八、props、state 与 render 函数

  1. 当组件的 props 或 state 发生改变的时候,render 函数就会重新执行
  2. 当父组件的 render 函数执行时,它的子组件的 render 也会重新执行
  3. render 重新执行:
render
重新执行
自身的 props 或 state 发生改变
父组件的 render 执行
 类似资料: