【React】笔记

创建 react

https://zh-hans.react.dev/learn/start-a-new-react-project

React 入门

JSX

JavaScript 和XML的缩写

在 JS 中编写 HTML 模板结构

通过 Babel 编译 成 JS

组件化开发模式

组件类型

• 函数式组件
• 类式组件

React 面向组件编程

组件三大核心属性

state

props

propType 用于对 prop 的类型和必要性的限制

refs

组件内的标签可以定义ref属性来标识自己，可以通过 ref 获取某个 dom 元素的值

• 字符串形式的 ref （不推荐），从 this.refs 中取节点

• 回调函数形式的 ref

  <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

  把 ref 所处的当前的节点放到组件实例的 input1 属性中

函数柯里化（高阶函数）

生命周期钩子

• constructor 构造器
• componentWillMount 组件将要挂载
• render 渲染
• componentDidMount 组价挂载完毕
• componentWillUnmount 组价将要卸载

生命周期（新）

React 应用（脚手架）

全局安装脚手架

npm i -g create-react-app

组件化编码流程

1. 拆分组件
2. 实现静态组件
3. 实现动态组件
   1. 动态显示初始化数据
      1. 数据类型
      2. 数据名称
      3. 保存在哪个组件？
   2. 交互

<Item {...todo}></Item>
// 等价于
<Item id={todo.id} name={todo.name} ></Item>

状态在哪里，操作状态的方法就在哪里

组件通信

父 -> 子

通过 props

子 -> 父

通过 回调函数，父组件把函数传给子组件，子组件在合适的时候，调用该函数，将值传入该函数

兄弟组件之间通信

消息订阅与发布

1) import PubSub from 'pubsub-js' //引入
2) PubSub.subscribe('delete', function(msg,data){ }); //订阅
3) PubSub.publish('delete', data) //发布消息

React ajax

第三方 ajax 库 axios

import axios from axios

脚手架配置代理

实现跨域请求

中间代理 没有 ajax 引擎，而是通过请求转发的形式，不存在跨域问题，能获取返回的数据

多个不同代理，要编写 setupProxy.js 配置具体代理规则

后端 跨域用 cors

React 路由

Redux

创建 react 项目

npx create-react-app react-basic

index.js

App.js

useState

数据驱动视图

直接修改原对象 是无法改变视图的

需要替换整个对象

组件样式

拓展：tailwind 样式是什么？

浏览器插件：React Developer Tools

利用 lodash 实现排序

_.ordeBy

npm install classnames

连续结构赋值 + 重命名

let obj = {
 a: {
 	b: {
 	 c: 1
 	}
 }
}

const {a:{b:{c:data}}} = obj;
console.log(data);

GitHub 搜索用户名

https://api.github.com/search/users?q=junglexs