对于一些更复杂的事情，有必要更深入的了解一些知识了

  1. react hook

看到很多文档示例会有这样的写法

const [data, setData] = useState([...initData]);

我只看完类就速速上手的人感到很难受，但也清楚这是hook的内容，有必要尝试一下将这些内容转化为类再把文档的效果实现在我的代码上这样，并能让我下次对于简单的操作能直接使用hook

其中 usestate将会设置函数的初始值，如同constructor中的state，而其中的第二个变量，则是修改第一个变量的函数，类似setState。

const [xxxState, getState] = useState("aaa")

顺带一提，对于hook来说，props仍然存在，但this是不需要的

类中还有一个需要在hook中进行替换的，即constructor中的语句，例如获取数据，可以用useEffect执行，他是通用的副效应钩子

useEffect(() => {
    fetch("/path/",{
      method: 'POST',
      headers: {
          'Content-type': 'application/json'
      },
      body: JSON.stringify({
          "xxx": "xxxxx"
      })
    }
    ).then(
			function (res){
        if(res.ok && res.status == 200){
          res.json().then(function (data){
            if(data.data == "xxx")
            getState("yyyy")
          })
        }
      }
    )

如果直接跑这个函数，则会无限循环

  1. 自定义data-属性

如何在事件中通过e 传递参数

通过使用data-任意名称

<p data-id="aaa" onClick={SetP}> aaa </p>

这之后即可在函数中通过 e.target.dataset.id 来获取值

  1. react 中…

这代表延展操作符

如果我们有一个数组mao = ['aaa','bbb','ccc']

那么，当某个函数刚好需要这几个参数的时候，使用如下：

funcMao(...mao);

等同于

funcMao('aaa','bbb','ccc');

  1. Children

当我发现无法看懂一些组件的源码的时候，有必要搞懂JSX对我的代码做了什么处理

事实上，JSX是对React.createElement(component, props, ...children) 进行了语法糖处理，这在官方文档的深入JSX一文中有所描述，简单来说，会将三个参数，写成一个非常易读的形式

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

会编译为

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

其中第二个参数，我们见的很多了，是props，而第三个参数，在前面使用中，是children，我在自己实现组件的时候，没有用到过。但是在使用其他组件的时候，我们见的非常多，包括字符串，或者在里面再包一个子元素，或是js表达式

这样的解释能让我们部分理解了一些组件内的代码，但是一些示例文档仍是一头雾水

例如一些form组件中，对于动态增减表单是如下写法：

<Form form={form} onSubmit={onSubmit}>
      <FormList name="address">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (

可以看出来此时的children是一个无头函数的返回，但紧接着在函数中的button中使用了add

<Button theme="default" variant="dashed" onClick={() => add({ province: 'bj', area: 'tzmax' })}>

此时的add和remove的定义是怎么来的

  1. 高阶组件

在FormList 的定义中，返回如下：

return /* @__PURE__ */React.createElement(FormListContext.Provider, {
    value: {
      name: name,
      rules: rules,
      formListMapRef: formListMapRef
    }
  }, children(fields, operation));

其中children含有两个参数，第一个则是用于放置表单内容的，而第二个的定义如下：

var operation = {
    add: function add(defaultValue, insertIndex) {
    ...
    }
   	remove: ...
}

朋友给了一个更简单的例子，当然，这是高阶函数

let fun = (fn) => {
	let fields = 1
	let add = 2
	let remove = 3
	fn(fields, {add, remove})
}

fun((fields, {add, remove})) => {
	console.log(fields, add, remove)
}

结果是 1 2 3

这将使得fun函数中的这三个值传导到匿名函数中

  1. 接收url params参数

想实现通过跳转的时候在url中添加参数来实现搜索功能，类似于搜索引擎那样

const [search,setSearch] = useSearchParams()
const xxxx = search.get('xxxx')

这样即可

之前还有一份笔记，本来这个是第四篇笔记的，不知道为啥没上传

  1. 设置fetch参数(例如超时时间)

我当时是在做请求错误的逻辑，包括catch和res.ok的判断，感觉这个东西可以去系统性的了解

我们首先着眼于一些实际的问题，例如fetch如何添加超时时间。

具体点来说，我们需要解决fetch如何设置参数的问题

通过简单的搜索引擎的查找，我们发现，需要使用Promsi.race

将

fetch(URL)

换为

Promise.race([
	fetch(URL),
	new Promise(function(resove,reject){
		setTimeout(()=>reject(new Error('request timeout')),2000)
	})])

2000的单位为毫秒，当然这不重要，主要是，我们进行了如此长的一个扩充。

  1. 关于HashRouter和BrowserRouter

使用TDesign的标准模板时, 路径中会存在#, 本来，#就#吧，实用角度来说，我也不会太在意这个问题，但是有一些路由设置的规则中似乎不允许#的存在。

这主要是由HashRouter引起的，在TDesign的示例模版中，这个直接存在于src 的 main.tsx

react router中HashRouter和BrowserRouter的区别和使用场景程序员良仔的博客-CSDN博客react路由的两种模式的区别

随便百度了一下，理论上说是做BrowserRouter 即可，但是需要后端对请求进行处理

  1. 如何设置某个特定行的线加粗

这个问题挺怪的，导致后面几个问题以及随之的临时的解决方案全部是围绕这个东西的。当然弄完这些之后我也暂时没有精力去改了

我需要对表中特定的行进行加粗处理，而我翻遍了api文档也没有找到这样的对特定行的style进行处理的例子

但是有添加 className的位置，通过rowClassName 指向一个函数，函数来判断和返回（设置）对应的值，虽然还有一个合并单元格并不能进行很好的命名，但这样也很好用了，我羸弱的前端知识告诉我再加一个样式文件即可解决问题

  1. Css modules

事实上也确实如此，import 对应的css文件即可，但是我们之前对样式的更改似乎可以直接在raect上面执行，阮一峰的文章对此有很好的解释

[CSS in JS 简介 – 阮一峰的网络日志 (ruanyifeng.com)](