react依赖包下载 npmjs.com
1.react样式
1.全局写法：
引入：import './app.scss'
使用：<p className="box"}>全局样式</p>
2.局部样式写法：
引入：import styles from './app.module.scss'
使用：<p className="styles.box">局部样式</p>
文件命名：App.module.scss
在局部中使用全局： ：global
3.直接使用样式
<p style={{width:'100px',height:'100px'}}></p>
4.类名操作：
安装：cnpm i classnames -d
引入：import cl from 'classnames' //cl是一个函数
使用：<p className={
a:true,
b:true,
c:false
}></p>
5.样式组件
引入 ：import styled from 'styled-components'
创建组件：const a = styled.div` width:100px;height:100px `
使用：<a/>
使用逻辑：
1.在创建时：background: ${props => props.color||'red'}; //这里写了一个小逻辑
2.在类组件中 color = 'plink'
3.使用样式组件 <a/>
<a color={this.color}/> //有color中是粉色，无color是红色
2.事件：
点击事件：onClick
键盘事件：onKeyDown
输入框事件：onInput
输入框改变事件：onChange
事件语法：<button onClick={this.getval}></button>
1.事件传参：<button onClick={ this.fn(10) }> 触发 </button>
fn = ( n ) => {
alert( n )
}
2.bind绑定 解决普通函数中的this会丢失
使用：方法1.调用时绑定bind <button onClick={this.fn.bind(this)}>点击</button>
方法2.在constructor(){super() this.fn=this.fn.bind(this)}
3.fn(){}
3.原生事件 通过componentDidMount(){ }拿到真实dom
使用：componentDidMount(){
const btn = document.querySelector('button')//拿到页面的按钮
btn.οnclick=function(){ alert('原生事件') }
}
3.props
1.props解构：
使用：render（）{ const {name，age} = this.props }
<p>{name}</p>
2.props外部传参
使用：<Hello name="haha" age={18}></Hello>
Hello组件接收：
//react使用语法时使用单括号
<p>{this.props.name}</p>
<p>{this.props.age}</p>
3.props自身定义
类组件通过一个关键字 static defaultProps={} 来定义自身属性
static defaultProps ={ color:'yellow' }
<p>{this.props.color}</p>
4.props验证【由外部传入的props】
需要下载依赖包 prop-types
1.导入 prop-types
先将属性传参：<Hello name="hhh" age={18}></Hello>
Hello组件验证：
使用prop-types来进行验证 组件.propsTypes={}
用法：
Hello.propsTypes={
name:PropTypes.string //验证类型
customProp(props ,propName,componentName ){ //props:属性，propName：属性名，componentName:组件名
if(props.money<3000){ alert('给少了') }
}
}
4.state
1.state定义：
1.在构造函数中定义： constructor(){ super() this.state={ name:'hahah' } }
调用：先解构 const {name} = this.staste return(<div>{name}</div>)
2.在class中直接定义 state={name:'fox'} {name}
2.state值修改 在类组件中必须通过 setState来修改值
用法：写法1： this.setstate({ name:'李四' })
写法2：this.setState((preState)={ console.log('preStete',preState) return{ name:'李四' } }) //preState时setState的旧值
3.setState的异步操作：
this.setstate({ name:'fox'},()=>{document.title = this.state.name})
4.setState的原生事件（同步）
1.获取dom const btn= document.quersySelector('button')
2.const _this = this //由于没有this所以声明一个常量来获取this
3.在事件中使用
btn,onclick = function(){ _this.setState({ name:"fox" }) }
5.{}
react中支持{}来实行{}语法：
return（<div>{ this.state.name.split('').reverse().join('') } </div>）
或者： {alert（‘hello’）}
6.条件渲染
1，短路原则：{ flag && <p>你好</p> }
2. 三目运算 ： { flag ? <p>你好</p> ： '' }
7.列表渲染
<ul>
{
list && list.map(item => <li key={item.cid}> { item.name } </li>) //一定要有一个key值
}
</ul>
8.类组件ts约定
interface P{ } //约定组件的 属性 的数据类型
interface S{ } //约定组件的 状态 数据类型
9.组件通信
p:any = {}可用于解决ts的声明问题 // p是属性名，这个用法可以在组件通信时使用
1.父子组件通信：
将数据绑定在子组件中 <Hello money={mone}><Hello/>
子组件接收 <p>{this.props.mone}</p>
2.子父组件通信：
1.通过自定义属性的形式传递一个方法给子组件
<Hello setXjk={ this.setXjk } />
setXjk = ( val)=>{ xjk:this.state.xjk.val } //这个val由子组件传递过来
2. 子组件调用父组件传递过来的方法 给父组件传值
先给子组件创建一个方法，使用方法后给父组件传值
<button onClick={ this.give }> 给红包 </button>
give=()=>{ this.props.setXjk( this.state.hongbao ) } //这个就是传递给父组件的val
3.兄弟组件通信：
在父组件中
1.将kick传递给子组件：<Sister kick={this.kick} />
kick = () => {
//todo 通过ref绑定获取brother组件中的setCryFlag
this.brother.setCryFlag();
};
子组件接收kick <button onClick={ this.props.kick }> 揍弟弟 </button>
2.使用ref将数据传递给另外一个子组件
<Brother ref={(el) => (this.brother = el)} />
在子组件中使用constructor生命周期，写一个setCryFlag方法 用于改变cryFlag的值
{ cryFlag && （<img/>） }
4.跨组件通信：
1.新建一个constext文件夹用于创建上下文对象
配置如下：
import React, { createContext } from 'react'
const ctx: React.Context<number> = createContext(0)
export default ctx
2.在父组件中将两个子组件嵌套
<ctx.Provider value={ money }> //在子组件前面要加ctx（constext文件中的名字）ctx.Provider名字固定 传递一个money值
<Father/>
</ctx.Provider>
3.子组件通过 contextType来接收ctx这个上下文对象
static contextType = ctx
在使用this.context直接使用即可
{this.context}
10.生命周期
挂载阶段
1.constructor(props:p){ //挂载阶段自动执行
super(props);
作用1：定义state
this,state={ name:'haha' }
作用2：普通的this绑定
this.handler = this.handler.bind(this)
作用3：用于接收绑定在组件身上的属性
console.log('props',props)
}
2. componentDidMount () { //todo 表示组件挂载结束
//todo 作用1： 将虚拟DOM渲染成真实DOM,也就是我们可以得到真实DOM了，可以做真实DOM操作了
this.p.style.background = 'red'
//todo 作用2： 发送数据请求
fetch('http://59.110.226.77:3000/api/category')
.then(data => data.json())
.then(res => {
console.log('res',res)
})
.catch(error => Promise.reject(error))
}
3. getDerivedStateFromProps 表示从属性中获取派生的状态 【 将props转成state 】
使用：static getDerivedStateFromProps(props: P, state: S) {
console.log('getDerivedStateFromProps')
return { //todo 作用 return返回值可以将props处理成state
money: props.money
}
}
4. render
//todo 作用1： 解析this.state和this.props
//todo 作用2： 还可以将jsx的虚拟dom渲染成对象形式的虚拟DOM
//! 注意点: 不能直接使用setState
更新阶段：
5.getDerivedStateFromProps
使用：static getDerivedStateFromProps(props: AppProps, state: AppState) {
//todo 挂载阶段和更新阶段都会执行
//todo 作用同挂载阶段
console.log("getDerivedStateFromProps");
return {};
}
6. shouldComponentUpdate
使用：shouldComponentUpdate(nextProps: AppProps, nextState: AppState) {
console.log("shouldComponentUpdate");
//!!! 很关键： 做react组件渲染优化的 [ 判断条件要自己手动来写 ]
/*
nextProps 最新的属性
nextState 最新的状态
this.props 旧属性
this.state 旧状态
*/
//todo 这个钩子函数必须要有返回值，返回值是一个布尔值
// return true //todo 表示允许组件重新渲染
// return false //todo 表示不允许组件重新渲染
return this.state.name != nextState.name; // 旧state和新状态对比，如果不同，则重新渲染组件，否则不允许渲染组件
}
7.getSnapshotBeforeUpdate
使用：getSnapshotBeforeUpdate = (prevProps: AppProps, prevState: AppState) => {
/*
prevProps prev-- previous 先前的 旧属性
prevState 旧状态
*/
console.log("getSnapshotBeforeUpdate");
//todo 作用1 可以得到旧的 porps & state
//todo 作用2 通过返回值可以传递一个数据给componentDidUpdate
//!!! 必须有返回值
return 1000;
};
8.componentDidUpdate
使用：componentDidUpdate(
prevProps: AppProps,
prevState: AppState,
snapShot: number
) {
//!!! 表示组件更新阶段了
//todo 作用1： 再次得到了新的真实DOM
this.p.style.background = "blue";
//todo 作用2： 可以发送数据请求
fetch("http://59.110.226.77:3000/api/category")
.then((data) => data.json())
.then((res) => {
console.log("res", res);
})
.catch((error) => Promise.reject(error));
//todo 作用3： 通过snapShot得到getSnapshotBeforeUpdate传递过来的数据
console.log('snapshot',snapShot)
}
9.render 同挂载阶段
销毁阶段：
componentWillUnmount(){ //表示组件被销毁了
作用1： 消除定时器
clearInterval(this.timer);
作用2：清除绑定在window或者document身上的事件
window.onresize = null;
作用三：清除第三方实例
delete this.swiper
}
11.静态路由：