React入门总结

ma_firsttime
630 阅读6分钟

React入门

1.2前端技术:

问题: 1. 组件tsx 封装原则, 快速封装, getTableData(pageNum?: number, level?: number, parent?: string, num?: number, num2?: number) { 调用时: getTableData(1) 问号代表可空并且 1=第一个参数 2.组件选择: bizcharts.net/product/Biz…
前端框架，拉出来比比渲染速度成了老生常谈 AntV 企业级可视化解决方案 antv.vision/zh 详细介绍各个可视化组件库 AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范

3.组件找到对应文档:这里组件使用的是AntV,而不是antDesign <Line {...realTimeConfig} /> g2plot.antv.vision/zh/examples… 归因分析趋势图 import { Line as G2plotLine, LineConfig as G2plotProps } from '@antv/g2plot'; #这里引入g2plot组件库,找折线图即可看到api.

前端依赖组件: import { Line } from '@ant-design/charts' //这里搜索可以查到具体依赖tgz的下面jar包,打开看也是 import { Line as G2plotLine, LineConfig as G2plotProps } from '@antv/g2plot';

{ "name": "Smart-Plus", "requires": true, "lockfileVersion": 1, "dependencies": { "@ant-design/charts": { "version": "0.9.13", "resolved": "registry.m.jd.com/@ant-design…", "integrity": "sha1-rWdWjsq5FuKU5BpMGEaqz9/wIJA=", "requires": { "@antv/g2plot": "^1.1.24", "@antv/g6": "^3.6.2" } },

1.2.14. 资料:

ant.design/components/… ant组件 zh-hans.reactjs.org/ hook zhuanlan.zhihu.com/p/65773322 react入门讲解-钩子+页面表单提交等, 自定义hooks,useReducer整合逻辑 react.html.cn/docs/state-… 入门大全 www.ruanyifeng.com/blog/2020/0… 基础讲解:组件

ES6 的展开表达式, Object.assign 的浅拷贝对象,js的深拷贝浅拷贝方法. 相比于使用模版语言的 Vue、Angular，使用原生 js（JSX 仅仅是 js 的语法糖）开发 UI 的 React 在语法层面有更多灵活性。

1.组件定义:

1.这里定义接口: export interface PeopleProps { compareDate: string compareType: string date: string hour: number page: string polarisIndex: string resource: string id: number quotaState: number } 2.组件导出, 其他页面可以用 了 export default function People(props: PeopleProps) { 3.使用: <People {...selected} id={objParams.id} quotaState={home.quotaState} /> 使用的是{...selected} 展开表达式. 赋值对应的参数传递给组件. 在组件内不能修改参数. 如果组件内想要参数改变再调用api, 需要重新封装.

提交组件:submit组件: onClick对应不同方法 确认 取消

《React 框架入门》和《React 最常用的四个钩子》。

任何一个组件，可以用类来写，也可以用钩子来写。下面是类的写法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }}

再来看钩子的写法，也就是函数。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;}

函数一般用来纯计算: 不涉及计算的操作（比如生成日志、储存数据、改变应用状态等等）使用钩子函数. React 为许多常见的操作（副效应），都提供了专用的钩子。 useState()：保存状态 useContext()：保存上下文 useRef()：保存引用 ...... 上面这些钩子，都是引入某种特定的副效应，而 useEffect()是通用的副效应钩子 。找不到对应的钩子时，就可以用它。

1.格式: 代码里 定义 组件 function Title(title: string, jini: string, index: number) { return (

{index}
{title}
波动指数: {toFixed(numFormat(jini) * 100, 2)+'%'}
) }

2.使用组件:

{Title(item.title, item.geni, index + 1)}

  1. 钩子函数,定义页面绑定的 date等值变化时,执行钩子内方法 useEffect(() => { if (props.page) { getDimen() } }, [props.date, props.hour, props.polarisIndex, props.resource, props.compareDate])

useEffect()的副效应函数内部有一个 async 函数，用来从服务器异步获取数据。拿到数据以后，再用setData()触发组件的重新渲染。 由于获取数据只需要执行一次，所以上例的useEffect()的第二个参数为一个空数组。 开课吧的 《React 原理剖析 + 组件化》 系统视频。

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。 React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。

1.2.2React入门介绍: blog.towavephone.com/react-techn… 入门

React 为了践行“构建快速响应的大型 Web 应用程序”理念做出的努力。 这其中有些优化手段可以在现有架构上增加，而有些（如：异步可中断更新）只能重构整个架构实现。 React16 架构 React16 架构可以分为三层： Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入 Reconciler Reconciler（协调器）—— 负责找出变化的组件 Renderer（渲染器）—— 负责将变化的组件渲染到页面上 可以看到，相较于 React15，React16 中新增了 Scheduler（调度器

React16 采用新的 Reconciler。 [RF记忆点] Reconciler 内部采用了 Fiber 的架构。 Fiber 是什么？他和 Reconciler 或者说和 React 之间是什么关系 虚拟 DOM 在 React 中有个正式的称呼——Fiber.

什么是代数效应 代数效应是函数式编程中的一个概念，用于将副作用从函数调用中分离。 总结一下：代数效应能够将副作用（例子中为请求图片数量）从函数逻辑中分离，使函数关注点保持纯粹。

类似于web component的组件封装，面向未来 可复用，可组合的组件架构 数据驱动，UI自动更新，解放DOM操作 JSX语法使得代码看起来简洁清晰 单向数据流: 使得组件行为更可预测 Virtual DOM: 虚拟DOM的抽象使得React 组件可以跨端渲染 React Native App开发

JSX语法和Vue模板语法类似 JSX好处

JSX Prevents Injection Attacks 安全 阻止XSS (cross-site-scripting)攻击 和传统模板比 简单 支持插槽， props.children

1.2.3react框架特色
使用注意: 1多个子标签的情况下，必须有一个父亲标签,如div, 如果不想显示这个父亲div， 可以使用React.Fragment标签来代替来替代

2.函数体内异步io,异步调用后端接口 需要使用: async await async querySubDimensionList(ctx) { let data = await detailModal.querySubDimensionList(ctx, params)

www.jianshu.com/p/dd8689d37… 嵌套子表格 segmentfault.com/q/101000001…
1.2.4前端语法大全: 熟悉一遍 targets: quotaList.join(','), list转成字符串.

var、let和const区别 juejin.cn/post/684490…

const remaining = end - new_time const一般是声明常量 const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化， 不能留到以后赋值，否则会报错 let声明的变量可以改变，值和类型都可以改变，没有限制 const声明的变量必须赋初始值，let不需要赋初始值 共同点： const 与let都只是声明所在的块级作用域内有效 正确修改代码， 将const改为let

react判空大概4中方法: 1.叹号判空 if (!!num2 || num2 == 0) { let keys = Object.keys(res.data.dataList[0]) tableData[num].children[num2] = Object.assign(tableData[num].children[num2], { children: res.data.dataList, })

Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。 1.json中的key重名,则进行覆盖 var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); //target // {a:1, b:2, c:3} 第一个目标对象,后面参数原对象

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2);

console.log(array3); // expected output: Array ["a", "b", "c", "d", "e", "f"]

Table表格:嵌套子表格用onexpand事件 expand 有两个参数 第一个参数 为 当前行是否展示 属性 为 true 和 false 第二个参数 为 当前 行下的数据 是一个数组 多存放在children中

avatar
文章
阅读
粉丝