【React】基础知识要点
时间：2022-08-22 11:00:01
参照blibli中【尚硅谷React视频，链接
P5、jsx语法规则
P9.函数组件
只能传一下props，不能操作state、refs等
function HelloMessage(props) { return Hello {props.name} } ReactDOM.render( P10、类相关知识
P11、类式组件
P14、绑定事件
P16、解决this指向问题
或者 changeWeather 改成 箭头函数 可以，不用bind了
P19.组件三大核心属性1:state总结
class Hello extends React.Component { // constructor(props) { // super(props); // this.state = { // text: 'Hello world!', // }; // } ///这种写法可以替换上述构造函数 state = { text: 'Hello world!', } handleClick=(e)=> { e.preventDefault(); console.log点击链接，this.state.text); this.setState({text:我被修改了} } render() { return ( text文字：{this.state.text}
点我 ) } }P20.组件三大核心属性2:props
P21、批量传递props
展开运算符：
P22、对props进行限制
P23、props简写
P组件三大核心属性3：refs
string类型的ref已过时，不建议使用。
P28.回调函数模式ref
P29、回调ref调用次数
P30、createRef
P31、总结ref
P32、不要过度使用ref
P35.高级函数，函数柯里化
代码示例：以下saveFormData是高级函数
函数柯里化代码示例：
P36不同的柯里化写法
P38.生命周期(旧)
react版本在16.8.4
卸载组件的方法：
P40、forceUpdate 强制更新
P42.总结生命周期(旧)
P43.比较新旧生命周期
一句话:废弃3个，新增2个（static getDerivedStateFromProps、getSnapshotBeforeUpdate）。
过时的生命周期:(不常用)
注：但是在react在18版中，不建议使用前缀。
生命周期（新）：
P新生命周期1：getDerivedStateFromProps
静态方法，使用概率极低。该方法适用于罕见的用例，即 state 值在任何时候都取决于 props。
P45-P新生命周期2：getSnapshotBeforeUpdate
P47.生命周期(新)总结:
P48、diffing算法
P49-P52、脚手架
P模块化风格
P54、vscode中react插件
输入“rcc类组件代码片段可以出现；输入rfc函数组件代码片段可以出现
P56-P63、TodoList
P64、TodoList总结
P65、请求接口 配置代理1
浏览器插件推荐安装-FeHelper ，它可以格式化后端返回的数据。
配置服务器代理：package.json文件中添加proxy：
"proxy": "http://localhost:5000"P66、配置代理2
配置多个服务器代理：
P67-P70、github搜索案例
P71.新闻订阅和发布 PubSub
代码示例：A组件将数据传输到B组件
B组件订阅信息：
A组件发布消息：
P73、github总结搜索案例
P77、路由（Link、Route）
P78.路由组件和一般组件
P80、NavLink与封装NavLink
P81、Switch提高效率
代码示例：
P解决多级路径刷新页面后样式丢失的问题
三种方法：
P83、严格匹配exact
P84、Redirect的使用
P85、嵌套路由
P86、路由的params参数 match.params
P87、路由的search参数 location.search，用querystring解析
querystring代码示例：
P88、路由的state参数 location.state，不体现在url中
P90、push与replace
push压栈(默认)，replace替换
LoginP编程路由导航
代码示例：
P92、withRouter
withRouter 一般组件可以加工，使其具有独特的路由组件api
P93、BrowserRouter与HashRouter
P97、redux 简介 (集中状态管理)
P98、redux工作原理
P100、redux精简版
store.js文件：
reducer文件：
组件中使用：
或者在入口文件这样写：
总结：
P101、redux完整版
action.js文件代码如下：
组件中使用：
P102、异步action
store.js：
action.js：
P103、react官方出的react-redux
P105、react-redux的基本使用
App.js中给容器组件传递store：
容器组件中：
ui组件中直接用this.props接收就行：
总结：
P106、优化1：简写connect的第二个参数 mapDispatchToProps
改成对象形式，value值为action，react-redux自动帮忙分发。
P107、优化2：Provider的使用
在index.js中使用：
P108、优化3：整合ui组件和容器组件
优化总结：
P111、合并reducers（用combineReducers）
在store.js中：
在容器组件中需要改下connect的第一个参数：
P112、纯函数
给数组开头添加一个数据，可以用下面的方式：
P113、redux开发者工具（需要事先编写代码再用）
在store.js编写代码之后，就可以再浏览器中使用开发者工具了
P116、setState的两种写法
P117、lazyLoad懒加载
P118、State Hook【useState】
代码示例：主要用于函数组件
P119、Effect Hook【useEffect】
代码示例：
P120、Ref Hook【useRef】
代码示例：
P121、Fragment标签
作用：可以不用必须有一个真实的DOM根标签了。
代码示例：
import React, { Fragment } from 'react';
function App() {
return (
123
)
}或者直接一个空标签：
<>
123
P122、context【createContext】
注意：在开发中一般不用context
P123、优化组件，使用PureComponent
P124、renderProps 类似vue中的插槽
代码示例：
P125、错误边界
代码示例：
##下面都是ReactRouter6新版本改变的东西------------
P127、ReactRouter6版本简述
在2021年6月成为默认版本
P128、一级路由 变成
原来的
P129、重定向
只要
P130、高亮
5版本的 activeClassName 不能用了。
P131、路由表 useRoutes()
routes/index.js:
App.js中：
P132、嵌套路由
当Route产生嵌套时，用
P133、路由的params参数【useParams()、useMatch('/xx/xx')】
useMatch：
P134、路由的search参数【useSearchParams()、useLocation()】
useLocation ：
P135、路由的state参数【useLocation()】
P136、编程式路由导航【useNavigate()】
