速通-React基础（结合Ant Design练习）

React练习代码仓库：https://github.com/Kyzr2000/react-practice

学习资料&视频：

【快速入门-React】https://zh-hans.reactjs.org/learn#

【React18+TS+Redux+Antd从零开发一个企业级后台管理系统】 https://www.bilibili.com/video/BV11U4y1y7Hp/?share_source=copy_web&vd_source=ddc00a8c8fe74fa87c6567446a0a1b9d

【尚硅谷React教程（2022加更，B站超火react教程）】 https://www.bilibili.com/video/BV1wy4y1D7JT/?p=31&share_source=copy_web&vd_source=ddc00a8c8fe74fa87c6567446a0a1b9d

【尚硅谷Web前端axios入门与源码解析】 https://www.bilibili.com/video/BV1wr4y1K7tq/?share_source=copy_web&vd_source=ddc00a8c8fe74fa87c6567446a0a1b9d

1.React基本内容

主要学习了采用组件化模式、声明式编码（原生JS是命令式编码）的React前端框架，在学习的过程中也体会到了在开发环境中React能够带来的便利。其中我在学习过程中整理了几点需要非常注意的事项，内容如下：

• 在React中的样式采用了“小驼峰命名法”（不是所有字母都是小写的，而是第一个单词首字母小写，第二个单词首字母大写），如className、onClick等。

• 以JSX为后缀的文件是原生JS文件的一种扩展，在React需要通过Babel转换成普通的JS代码。

• 在使用JS高阶方法map()对li列表进行遍历时，需要为每一个li添加一个key，并且这个key要保证在单次循环内具有唯一性。

• 组件分为函数式组件和类组件，其中state和refs只能在类组件中使用（未学习hooks的前提下），props可以在react的函数式组件中使用。

• 使用refs时应尽量避免字符串形式的ref，在开发时可以使用回调函数形式的ref和React内api中的createRef。

• React的受控组件和非受控组件：其中受控组件是指组件的状态（state）被管理，同时会更新组件的状态；非受控组件是通过ref访问DOM节点直接获取其值。

• React的生命周期函数不会根据编写顺序执行，会根据其生命周期严格执行。

• React新生命周期相比于旧的生命周期，废除了三个方法（但是目前加Unsafe_前缀仍可以使用，使用情况不多，尽量还是不要使用），并且在新的生命周期中新增了两个方法。

  

• 组件在写成双标签的时候需要在其props属性内加入children，类型为ReactNode，这样在双标签内填写的内容会直接传递到该组件props的children内，同理可以使用this.props.children引入标签体的内容。