一、基础
1、使用babel解析
2、不直接使用jsx，jsx写起来很繁琐
3、jsx语法规则
4、函数式组件的使用
5、函数式组件渲染
6、类组件渲染
7、类组件中事件调用this指向问题
8、类组件不能直接改变状态
9、props接收数据类型限制
类型限制放到类组件内部，用static关键字
10、ref的使用
字符串ref：不推荐使用
回调ref（内联函数），更新会执行两次，第一次参数为null，第二次才是dom，这个无关紧要。
要想只执行一次，就不能写成内联函数，要把函数写到类上，用this调用才行；
createRef的使用
react改写了原生的事件分析：
11、jsx注释
12、受控组件与非受控组件
受控组件：组件内有状态存储变量
非受控组件：表单的值现用现取
13、高阶函数、函数柯理化
14、生命周期函数（旧）
15、生命周期函数（新）
相比旧版新增了2个，删除了3个
getSnapshotBeforeUpdate钩子的应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
</head>
<style>
.list{
width: 200px;
height: 150px;
background-color: skyblue;
overflow: auto;
}
.news{
height:30px;
}
</style>
<body>
<div id="app"></div>
<script type="text/babel">
class MyDom extends React.Component{
state = {newsArr:[],mouseType:false}
mouseIn=()=>{
console.log('aa')
this.setState({mouseType:true})
}
mouseOut=()=>{
console.log('bb')
this.setState({mouseType:false})
}
componentDidMount(){
// console.log('componentDidMount')
setInterval(()=>{
const {newsArr} = this.state;
const news = '新闻'+(newsArr.length+1)
this.setState({newsArr:[news,...newsArr]})
},1000)
}
getSnapshotBeforeUpdate(){
// console.log('getSnapshotBeforeUpdate')
return this.refs.list.scrollHeight;
}
componentDidUpdate(preProps,preState,height){
// console.log('组件更新完成','componentDidUpdate');
if(this.state.mouseType){
this.refs.list.scrollTop+=this.refs.list.scrollHeight-height;
}else{
this.refs.list.scrollTop = 0
}
}
render(){
// console.log('render函数')
const arr = this.state.newsArr.map((item,index)=>{
return <div className="news" key={index}>{item}</div>
})
return (
<div className="list" ref="list" onMouseOver={this.mouseIn} onMouseLeave={this.mouseOut}>
{arr}
</div>
)
}
}
ReactDOM.render(<MyDom/>,document.getElementById("app"))
</script>
</body>
</html>16、脚手架介绍
17、好用的快捷键插件介绍
ES7 React/Redux/GraphQL/React-Native snippets
// ES7 React/Redux/GraphQL/React-Native snippets 快捷键
// rcc 类组件
// rfc 函数组件
// imrc 引入react
18、react跨域方式
1、跨域方案放在package.json文件中；
"proxy": "http://localhost:5000"
2、跨域方案 在src目录下新建setupProxy.js文件；
17版本与18版本有一点区别，截图是17版本，代码是18版本；
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware('/api1', {
target: 'http://localhost:5000',
changeOrigin: true, // 控制服务器接收到的请求头中host字段的值
pathRewrite:{'^/api1':''}
}),
createProxyMiddleware('/api2', {
target: 'http://localhost:5001',
changeOrigin: true, // 控制服务器接收到的请求头中host字段的值
pathRewrite:{'^/api2':''}
}),
)
}18、连续解构赋值
连续解构赋值并重命名
19、搜索过滤练习
后端接口cors解决跨域问题
请求地址：api.github.com/search/users?q=ty
20、消息发布订阅模式
B和C是兄弟组件，使用pubsub-js实现兄弟间传递消息
// 组件B
import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import sty from './index.module.css';
export default class B extends Component{
//组件B发布消息
pushMsg = () => {
PubSub.publish('toTy',{name:'ty',age:20})
}
render () {
return <div>
<div className={sty.color}>React</div>
<button onClick={this.pushMsg }>发布消息</button>
</div>
}
}// 组件C
import React, { Component } from 'react';
import Pubsub from 'pubsub-js'
import sty from './index.module.css';
export default class B extends Component{
componentDidMount () {
// 组件C订阅消息
this.token = Pubsub.subscribe('toTy', (msg,data) => {
console.log(1,msg,data)
})
}
componentWillUnmount () {
// 组件C取消订阅消息
Pubsub.unsubscribe(this.token);
}
render () {
return <div>
<div className={sty.color}>,你好</div>
</div>
}
}
