React教程（由浅到深）

1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>`接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name

ik i5

31818人浏览 · 2023-07-02 16:58:39

ik i5 · 2023-07-02 16:58:39 发布

文章目录

1. 基本语法
2. react脚手架基本配置
3 组件间的通信
4. 路由
4.react-router6+版本
5. redux
6. React Hooks 及其扩展

1. 基本语法

1.1 初体验Hello React

   <div id="app"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel">
		const demo = <span>Hello Word</span>
		ReactDOM.render(demo, document.querySelector('#app'))
	</script>

1.2 JSX语法的基本使用

jsx语法规则：

渲染定义的元素，表达式需要{ }

const name = 'Hello Word'
<span style={{color:'red',fontSize:'55px'}}>{name}</span>

样式的类名，要用className。

<div className="className" id={ID}>
	<span style={{color:'red',fontSize:'55px'}}>{name}</span>
</div>

内联样式，要用style={{key:value}}的形式去写。

	<span style={{color:'red',fontSize:'55px'}}>{name}</span>

只有一个根标签
标签必须闭合
undefined/null/Boolean 类型

 <h2>{String(aaa)}</h2>
 <h2>{bbb + ""}</h2>
 <h2>{ccc.toString()}</h2>

1.2.1 语句与表达式说明

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
混入map 表达式

const data = ['Vue', 'React', 'Animation']
		// 只能渲染数组
		const VDOM = (
			<div>
				<h1>HEllo REACT</h1>
				<h2>React遍历对象与数组</h2>
				<ul>
					{
						data.map((v, index) => {
							return <li key={index}>{v}</li>
						})
					}
				</ul>
			</div>
		)
ReactDOM.render(VDOM, document.querySelector('#test'))

1.3. React面向组件编程

1.3.1 函数组件与类组件

函数组件
注意点
- 函数式组件定义时首字母必须大写
- render渲染时必须使用标签

function MyComponent(){
   console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
 }
		
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

类组件
注意点
- 类组件必须继承React.Component
- 必须写render函数
- 必须有返回值

class MyComponent extends React.Component {
	render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//this指向？—— MyComponent的实例对象 <=>MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

1.4 组件实例的三大特性

1.4.1 state数据存储状态

注意点 React默认开启严格模式

普通函数的形式直接在事件中调用 this的指向undefined 可以在构造函数中利用bind,apply，call 改变this的指向
setState 用于更新state中的数据，里面包含一个对象要改变的值（注意点，setState是异步的，可以传递对象或者函数，且每次调用 render函数都会重新渲染）

// state使用 
		class Wether extends React.Component {
			// 1. 继承React组件实例上添加的属性
			//  2. 构造器的this指向构造函数的实例对象
			//  3. render() 函数中的this也指向构造函数的实例对象
			constructor(props) {
				// super继承父组件属性
				super(props)
				this.state = { isHost: false, wind: '炎热' }
				// 改变this的指向
				this.demo = this.demo.bind(this)
			}
			render() {
				const { isHost } = this.state
				// this.function 是直接调用this指向window
				return (
					<div onClick={this.demo} >{isHost ? '雨天' : '晴天'}</div>
				)
			}
			demo() {
				// this.state.isHost = !this.state.isHost   // 取反 状态不能直接更改（React响应捕捉不到）
				let isHost = this.state.isHost
				// 修改状态需要用setState
				this.setState({ isHost: !isHost })
			}

		}
		ReactDOM.render(<Wether />, document.querySelector('#test'))

简写的方式

class Wether extends React.Component {
			// constructor(props) {
			// 	super(props)

			// 	// 改变this指向
			// 	this.speck = this.speck.bind(this)
			// }
			// 简写: 直接原型上追加属性
			state = {
				name: '张三',
				isName: true
			}
			render() {
				let { isName, name } = this.state
				return (
					<div onClick={this.speck} style={{ fontSize: '24px', color: 'red' }}> {isName ? '显示名字' : `不显示${name}`}</div>
				)
			}
			// 直接追加到原型上这里的this就是指原型
			speck = () => {
				let isName = this.state.isName
				// setState里面必须包含一个对象
				this.setState({ isName: !isName })
			}
		}
		ReactDOM.render(<Wether />, document.querySelector('#test'))

1.4.2 props的使用

1.4.2.1基本使用

基本使用 props直接在实例上的 key=value 会追加到React实例props上
对象解构的方式使用


class Person extends React.Component{
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age+1}</li>
					</ul>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
		const p = {name:'老刘',age:18,sex:'女'}
		// 对象解构的方式使用 
		ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

1.4.2.2 做限制类型，默认值使用

实例.propTypes={ } 对象里面包含要限制的数据类型
实例.defaultProps={ } 对象里面包含的是默认的属性值

class DataLimit extends React.Component {
			speck=()=>{
				console.log(this.props)
			}
			render() {
				const { name, age, sex } = this.props
				// 注意点为props为只读属性不能修改
				return (
					<div>
						<h2>{name}</h2>
						<h2>{age+1}</h2>
						<h2>{sex}</h2>
						<h2 onClick={this.speck}> 点击事件</h2>
					</div>
				)
			}
		}
		// propType 限制类型 （是否必传等）
		//  1.PropTypes.string 限制为字符串
		//  2.PropTypes.string.isRequired 限制为必传
		//  3. 限制方法为func
		DataLimit.propTypes = {
			name: PropTypes.string.isRequired,
			sex: PropTypes.string,
			speak: PropTypes.func
		}
		// prop传值 默认值
		DataLimit.defaultProps = {
			sex: "女"
		}
		const data = { name: '张珊珊', age: 18, sex: "男" }
		ReactDOM.render(<DataLimit {...data} />, document.querySelector('#test1'))

1.4.2.3 简写方式

注意点

static 关键字给类添加属性

	//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
      class Car {
			constructor(name,price){
				this.name = name
				this.price = price
				// this.wheel = 4
			}
			a = 1
			wheel = 4
			static demo = 100
		}
		const c1 = new Car('奔驰c63',199)
		console.log(c1);
		console.log(Car.demo);  // 100

. 给定类 DataLimit 添加 propTypes与defaultProps 两个属性做限制

// static 给类添加属性
		class DataLimit extends React.Component {
			speck = () => {
				console.log(this)
			}
			render() {
				const { name, age, sex } = this.props
				// 注意点为props为只读属性不能修改
				return (
					<div>
						<h2>{name}</h2>
						<h2>{age + 1}</h2>
						<h2>{sex}</h2>
						<h2 onClick={this.speck}> 点击事件</h2>
					</div>
				)
			}
			static propTypes = {
				name: PropTypes.string.isRequired,
				sex: PropTypes.string,
				speak: PropTypes.func
			}
			// prop传值 默认值
			static defaultProps = {
				sex: "女"
			}
		}
		// (DataLimit.对象) 与直接在类里面用(static 对象) 一样
		console.log(DataLimit.propTypes);
		const data = { name: '张珊珊', age: 18, sex: "男" }
		ReactDOM.render(<DataLimit {...data} />,   
	    document.querySelector('#test1'))

1.4.2.4 函数组件中使用props

注意点

默认值传参以及函数接受的值

function Person(prop) {
			const { name, age, sex } = prop
			return (
				<div>
					<li><a href="">{name}</a></li>
					<li><a href="">{age}</a></li>
					<li><a href="">{sex}</a></li>
				</div>
			)
		}
		// 函数式组件限制
		 Person.propTypes = {
				name: PropTypes.string.isRequired,
				sex: PropTypes.string,
				speak: PropTypes.func
			}
			// prop传值 默认值
		Person.defaultProps = {
				sex: "女"
			}
		const data = { name: '张珊珊', age: 18, sex: "男" }
		ReactDOM.render(<Person {...data} />, document.querySelector('#test1'))

1.4.3 refs的使用

refs 操作dom

1.4.3.1 直接使用ref绑定字符串

用ref绑定的dom会被收集到 refs这个对象中

	class PersonRefs extends React.Component {
			clickRef = () => {
				console.log(this);   // {Input:dom节点 }
				console.log(this.refs.Input);
			}
			render() {
				// 字符串形式的ref
				return (
					<div>
						<input type="text" ref="Input"/>
						<button ref="button" onClick={this.clickRef}>点击Refs </button>
						<input ref="input02" type="text" />
					</div>
				)
			}
		}
		ReactDOM.render(<PersonRefs />, document.querySelector('#test'))

在这里插入图片描述

1.4.3.2 回调函数的形式

class RefsFunc extends React.Component {

			addInput = () => {

				alert(this.input.value)
				// const { input1 } = this
				// alert(input1.value)
			}
			state = {
				isShow: true
			}
			isShowEvent = () => {
				const { isShow } = this.state
				console.log(isShow);
				this.setState({ isShow: !isShow })
			}
			// ref 中写成这个只会回调一次
			CurrentEvent = (vnode) => {
				this.input02 = vnode
				console.log('xxxxxx');
			}
			render() {
				//🌎 默认回调一次
				//🌎更新时，调用两次
				// Vnode => this.input1 = Vnode  回调函数 ref 回调形式
				return (
					<div>
						<input type="text" ref={CurrentNode => { this.input = CurrentNode; console.log('更新调用两次'); }} defaultValue="默认值" />
						<input type="text" ref={this.CurrentEvent} />
						<input type="text" ref={Vnode => this.input = Vnode} defaultValue="默认值" />
						<button onClick={this.addInput}> 函数形式的Input使用 </button>
						<p>{this.state.isShow ? "更新false" : "更新true"}</p>
						<button onClick={this.isShowEvent}>切换内联函数调用</button>
					</div>
				)
			}
		}
		ReactDOM.render(< RefsFunc />, document.querySelector('#test'))

1.4.3.3 createRef的方式

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,返回一个要ref绑定的dom节点，且key唯一

	class RefsFunc extends React.Component {
			// 实例上添加一个myInput
			myInput = React.createRef()
			componentDidMount = () => {
				console.log(this);
				console.log(this.myInput.current.value);
				// this.currentRefs.current.focusTextInput();
			}
			render() {
				return (
					<div>
						<input type="text" ref={this.myInput} />
						<button onClick={this.componentDidMount}>createRef生成容器标识refDOM节点</button>
					</div>
				)
			}
		}
		ReactDOM.render(< RefsFunc />, document.querySelector('#test'))

参看官网：createRef官网链接

1.5. React事件处理与委托

操作的事件与要操作的组件数据在同一个dom节点时，利用事件委托的方式

class Demo extends React.Component{
   
			//展示左侧输入框的数据 refs
			
			showData = ()=>{
				console.log(this.myrefs.value);
			}
	    //  操作的事件与要操作的组件数据在同一个dom节点时，利用事件委托的方式
			//展示右侧输入框的数据（target 处理数据）
			showData2 = (event)=>{
				alert(event.target.value);
			}
			render(){
				return(
					<div>
						<input ref={e=>this.myrefs=e} type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

1.6.受控组件与非受控组件

1.6.1 非受控组件

获取要提交的值为现用现取

class Login extends React.Component{
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this
				alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input ref={c => this.username = c} type="text" name="username"/>
						密码：<input ref={c => this.password = c} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))

1.6.2受控组件

//受控组件 ， 事件触发Input中 传在数据的值
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}
			//保存用户名到状态中
			saveUsername = (event)=>{
				this.setState({username:event.target.value})
			}

			//保存密码到状态中
			savePassword = (event)=>{
				this.setState({password:event.target.value})
			}
			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}

			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveUsername} type="text" name="username"/>
						密码：<input onChange={this.savePassword} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))

1.7. 高阶函数与函数柯里化

高阶函数

如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
- 若A函数，接收的参数还是一个函数，那么A就可以称之为高阶函数。
- 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
- 常见的高阶函数有：Promise、setTimeout、arr.map()等等

函数柯里化参考链描] 让函数的职责不再单一

1.7.1 柯里化回调

注意点

onChange={this.InputName('username')('xxxx')} 共调用三次，react调用，默认返回的值为target

/创建组件
		class Login extends React.Component {
			// 初始化状态
			state = {
				username: "默认值",
				password: ""
			}
			// 实时更新状态, 数据维护在state中为受控组件(相当于vue里面的v-model)
			InputName = (dataType) => {
				// onChange默认的返回一个函数
				//回调的是一个函数  (既函数的柯里化)
				return (Type) => {
					console.log([Type]);
					return (e) => {
						this.setState({ [dataType]: e.target.value })

					}
				}
			}
			InputPassWord = (e) => {
				this.setState({ password: e.target.value })
			}
			handlySubmit = (e) => {
				e.preventDefault();
				alert(`userName: ${this.state.username} passwrod : ${this.state.password}`,)
			}
			render() {
				return (
					<div>
						<form onSubmit={this.handlySubmit} >
							{ /* <div>value 绑定默认值</div>*/}
							<input type="text" value={this.state.username} onChange={this.InputName('username')('xxxx')} name="username" />
							<input type="text" onChange={this.InputPassWord} name="password" />
							<button>提交</button>
						</form>

					</div>
				)
			}
		}
		ReactDOM.render(<Login />, document.querySelector('#test'))

1.7.2 高阶回调

	class Login extends React.Component {
			// 初始化状态
			state = {
				username: "默认值",
				password: ""
			}
			// 实时更新状态, 数据维护在state中为受控组件(相当于vue里面的v-model)
			InputName = (dataType, event) => {
				// onChange默认的返回一个函数
					// [datatype]使用变量作为属性名
				this.setState({ [dataType]: event.target.value })

			}
			InputPassWord = (e) => {
				this.setState({ password: e.target.value })
			}
			handlySubmit = (e) => {
				e.preventDefault();
				alert(`userName: ${this.state.username} passwrod : ${this.state.password}`,)
			}
			render() {
				return (
					<div>
						<form onSubmit={this.handlySubmit} >
							{ /* <div>不用可里化的方式实现
							   1. onChange 先调用一个event函数在event 函数中又调用了this.InputName这个函数 
							</div>*/}
							<input type="text" value={this.state.username} onChange={(event) => {
								this.InputName('username', event)
							}
							} name="username" />
							<input type="text" onChange={this.InputPassWord} name="password" />
							<button>提交</button>
						</form>

					</div>
				)
			}
		}
		ReactDOM.render(<Login />, document.querySelector('#test'))

1.8. 组件的生命周期

1.8.1 旧生命周期

初始化阶段: 由ReactDOM.render()触发—初次渲染

1.	constructor()
2.	componentWillMount()
3.	render()
4.	componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

更新阶段: 由组件内部this.setSate()或父组件render触发

	1.	shouldComponentUpdate()
	2.	componentWillUpdate()
	3.	render() =====> 必须使用的一个
	4.	componentDidUpdate()

卸载组件:

1. 由ReactDOM.unmountComponentAtNode()触发
2. componentWillUnmount()  =====> 常用一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

4.生命周期执行顺序代码参考

	class Count extends React.Component {
			constructor(props) {
				super(props)
				console.log('构造器,constructor');
			}
			state = {
				count: 1
			}
			handlyAdd = () => {
				let { count } = this.state
				count++;
				this.setState({ count })
			}
			// 钩子
			// 1.组件将要挂载的钩子
			componentWillMount() {
				console.log('组件将要挂载的钩子 	componentWillMount');
			}
			// 2. 挂载中 
			render() {
				console.log('挂载中  render');
				const { count } = this.state
				return (
					<div>
						<p>当前的数字 {count}</p>
						<button onClick={this.handlyAdd}>点我加一</button>
						<button onClick={this.UnMountEvent}> 卸载组件</button>
						<button onClick={this.mandatoryUpdate}> 强制更新，不改状态</button>
					</div>
				)
			}
			//3 挂载完毕
			componentDidMount() {
				console.log('挂载完毕 componentDidMount');
			}
			// 更新的组件
			//  1. 组件是否可以更新 返回值ture 或false
			shouldComponentUpdate() {
				console.log('组件是否可以更新 shouldComponentUpdate');
				// 🚗 注意点1. 这个方法不写默认可以更新  为true 
				// 2.  方法写入了 ，没有return 默认为false
				return true
			}
			// 2. 组件将要更新
			//  3. render(){}
			componentWillUpdate() {
				console.log('组件将要更新 componentWillUpdate');
			}
			// 4. 组件更新
			componentDidUpdate() {
				console.log('组件更新完毕 componentWillUpdate');
			}

			//999 卸载组件
			UnMountEvent = () => {
				console.log('卸载DOM节点  unmountComponentAtNode');
				ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
			}
			// 强制更新 不走shouldComponentUpdate()函数
			mandatoryUpdate = () => {
				this.forceUpdate()
			}
		}


		// 父子组件生命周期
		class Myfalter extends React.Component {
			state = {
				name: "父组件信息"
			}
			fatherEmitSon = () => {
				const { name } = this.state
				this.setState({ name: '修改父组件的信息' })
			}
			render() {
				const { name } = this.state
				return (
					<div>
						<h2>我是父组件</h2>
						<h3>-----------------------------------</h3>
						<button onClick={this.fatherEmitSon}>修改父组件值传递给子组件 </button>
						< Myson name={name} />
					</div>
				)
			}
		}
		class Myson extends React.Component {
			render() {
				return (
					<div>
						<h2>我是子组件</h2>
						<p>我将要展示父组件的内容: <span style={{ color: 'red' }}>{this.props.name}</span></p>
					</div>
				)
			}
				componentDidMount() {
					console.log('子组件挂载时调用   componentDidMount');
				}
			componentWillReceiveProps(props) {
				//  1. （第一次接受值默认没有调用）子组件更新触发的生命周期 可以传递值
				console.log('xxxxxxxxx', props);
			}
			shouldComponentUpdate() {
				console.log('组件是否可以更新 shouldComponentUpdate');
				// 🚗 注意点1. 这个方法不写默认可以更新  为true 
				// 2.  方法写入了 ，没有return 默认为false
				return true
			}
			// 2. 组件将要更新
			//  3. render(){}
			componentWillUpdate() {
				console.log('组件将要更新 componentWillUpdate');
			}
			// 4. 组件更新
			componentDidUpdate() {
				console.log('组件更新完毕 componentWillUpdate');
			}
		}
		//  ReactDOM.render(<Count />, document.querySelector('#test'))
		ReactDOM.render(<Myfalter />, document.querySelector('#test'))

在这里插入图片描述

1.8.2 新生命周期

初始化阶段: 由ReactDOM.render()触发—初次渲染

1.	constructor()
2.	getDerivedStateFromProps() 
3.	render()
4.	componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

更新阶段: 由组件内部this.setSate()或父组件重新render触发

1.	getDerivedStateFromProps()
2.	shouldComponentUpdate()
3.	render()
4.	getSnapshotBeforeUpdate()
5.	componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1.	componentWillUnmount()  =====> 常用一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

注意点 UNSAFE_componentWillMount() , UNSAFE_componentWillUpdate() 等生命周期废弃具体参考官网
生命周期代码参考

class Count extends React.Component {
			constructor(props) {
				super(props)
				console.log('构造器,constructor');
			}
			state = {
				count: 1
			}
			handlyAdd = () => {
				let { count } = this.state
				count++;
				this.setState({ count })
			}
			// 2. 挂载中 
			render() {
				console.log('挂载中  render');
				const { count } = this.state
				return (
					<div>
						<p>当前的数字 {count}</p>
						<button onClick={this.handlyAdd}>点我加一</button>
						<button onClick={this.UnMountEvent}> 卸载组件</button>
						<button onClick={this.mandatoryUpdate}> 强制更新，不改状态</button>
					</div>
				)
			}
			// 新增加的钩子（相当于将要挂载 或将要更新的钩子）
			// 用处: state值完全取决于props
			// 注意点 写入必须返回值
			static getDerivedStateFromProps(props, state) {
				console.log("新增加的钩子  getDerivedStateFormProps");
				console.log('state', state);
				// 返回一个对象
				return props
			}
			//  新增加的钩子 (在更新之前获取快照)
			// 注意点  必须返回一个快照 或null
			getSnapshotBeforeUpdate() {
				return '更新之前的值'
			}
			//3 挂载完毕
			componentDidMount() {
				console.log('挂载完毕 componentDidMount');
			}
			// 更新的组件
			//  1. 组件是否可以更新 返回值ture 或false
			shouldComponentUpdate() {
				console.log('组件是否可以更新 shouldComponentUpdate');
				// 🚗 注意点1. 这个方法不写默认可以更新  为true 
				// 2.  方法写入了 ，没有return 默认为false
				return true
			}
			// 4. 组件更新完成(拿到之前的值,可以获取getSnapshotBeforeUpdate这个钩子return的值)
			componentDidUpdate(preProps, preState, preValue) {
				console.log('组件更新完毕 componentWillUpdate');
				console.log('组件更新完成', preProps, preState, preValue);
			}
			//999 卸载组件
			UnMountEvent = () => {
				console.log('卸载DOM节点  unmountComponentAtNode');
				ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
			}
			// 强制更新 不走shouldComponentUpdate()函数
			mandatoryUpdate = () => {
				this.forceUpdate()
			}
		}


		// 父子组件生命周期
		class Myfalter extends React.Component {
			state = {
				name: "父组件信息"
			}
			fatherEmitSon = () => {
				const { name } = this.state
				this.setState({ name: '修改父组件的信息' })
			}
			render() {
				const { name } = this.state
				return (
					<div>
						<h2>我是父组件</h2>
						<h3>-----------------------------------</h3>
						<button onClick={this.fatherEmitSon}>修改父组件值传递给子组件 </button>
						< Myson name={name} />
					</div>
				)
			}
		}
		class Myson extends React.Component {
			render() {
				return (
					<div>
						<h2>我是子组件</h2>
						<p>我将要展示父组件的内容: <span style={{ color: 'red' }}>{this.props.name}</span></p>
					</div>
				)
			}
			componentDidMount() {
				console.log('子组件挂载时调用   componentDidMount');
			}
			componentWillReceiveProps(props) {
				//  1. （第一次接受值默认没有调用）子组件更新触发的生命周期 可以传递值
				console.log('xxxxxxxxx', props);
			}
			shouldComponentUpdate() {
				console.log('组件是否可以更新 shouldComponentUpdate');
				// 🚗 注意点1. 这个方法不写默认可以更新  为true 
				// 2.  方法写入了 ，没有return 默认为false
				return true
			}
			// 2. 组件将要更新
			//  3. render(){}
			componentWillUpdate() {
				console.log('组件将要更新 componentWillUpdate');
			}
			// 4. 组件更新
			componentDidUpdate() {
				console.log('组件更新完毕 componentWillUpdate');
			}
		}
		ReactDOM.render(<Count />, document.querySelector('#test'))
		// ReactDOM.render(<Myfalter />, document.querySelector('#test'))

生命周期参考图生命周期图解官网参考

在这里插入图片描述

1.8.3 _getSnapshotBeforeUpdate的使用场景

利用上次传递的高度实现滚动官网参考链接

// scrollTop     滚动的高度
		// scrollHeight  内容区域的高度
		class NewsList extends React.Component {
			state = {
				newList: []
			}
			componentDidMount() {
				setInterval(() => {
					const { newList } = this.state
					let list = `新闻${newList.length + 1}`
					this.setState({ newList: [list, ...newList] })
				}, 1000)
			}

			getSnapshotBeforeUpdate() { 
				return this.refs.list.scrollHeight
			}
			componentDidUpdate(preProps, preState, height) {
        //  console.log(preProps, preState, height);
				// height 是 getSnapshotBeforeUpdate()传递的值
				this.refs
			}
			render() {
				return (
					<div className="list" ref="list">
						{
							this.state.newList.map((n, index) => {
								return <div key={index} className='news'> {n}</div>
							})
						}
					</div>
				)
			}
		}
		ReactDOM.render(<NewsList />, document.getElementById('test'))

2. react脚手架基本配置

2.1 创建项目与项目基本结构

全局安装：

npm i -g create-react-app

create-react-app hello-react

项目架构
public中 index.html 文件说明

<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹的路径 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!-- 开启理想视口，用于做移动端网页的适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定网页添加到手机主屏幕后的图标 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!-- 应用加壳时的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
		<!-- 若llq不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
		<!-- 根ID -->
    <div id="root"></div>

2.2 全局样式与模块样式

新建css文件命名时以 文件名.module.css 命名
导入时采用 import xxx from xxxx

2.3 配置代理，fetch与axios发送请求

2.3.1 代理配置

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js

编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

注意以上是react 17 以前版本，现在代理配置

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/students",   // 匹配
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
      // pathRewrite:{
      //   '^/api':""  // 忽略
      // }
    })
  );
};

2.3.2 fetch发送网络请求

注意点 fetch 发送请求，请求成功数据在 res.json() 中

版本01

   fetch(`https://api.github.com/search/users?q=${value}`)
      .then((res) => {
        console.log("服务器连接成功");
        // 1.调用res.JSON() 获取连接成功的数据并返回
        return res.json();
      })
      .then((res) => {
        console.log("获取数据成功", res);
      })
      .catch((err) => {
        console.log("失败的回调");
      });

优化版本2

  fetch(`https://api.github.com/search/users?q=${value}`)
       .then((data) => console.log(data))
       .catch((error) => console.error(error));

优化版本3

 const res = await fetch(`https://api.github.com/search/users?q=${value}`);
  const data = await res.json();
  console.log(data);

3 组件间的通信

3.1 父子通信，props ，事件

父组件在展示子组件时，会传递一些数据给子组件：采用如下方法

父组件通过 属性=值的形式来传递给子组件数据，或采用解构的形式传参
子组件通过this.props获取父组件传递过来的数据

export class App extends Component {
  constructor() {
    super()

    this.state = {
      books: [
        {name: "算法导论", price: 79},
        {name: "数据结构", price: 69},
        {name: "漫画算法", price: 59},
      ]
    }
  }
  render() {
    const { books } = this.state
    return (
      <div>
        {/* 将数据传递给子组件 */}
        <Header books={books}/>
      </div>
    )
  }
}

子组件接受父组件传递的数据

export class Header extends Component {
  render() {
    // 接受父组件传递过来的参数
    const { books } = this.props
    return (
      <div>
        <ul>
          {
            books.map(item => {
              return (
                <li key={item.name}>
                  名称: {item.name} 价格: {item.price}
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

回调函数，子组件向父组件传递消息：

在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；

import React, { Component } from 'react'
import ConterButton from './c-cpn/ConterButton'

export class App extends Component {
state = {conter: 100}
  changeConter() {
  let {conter}= this.state
  conter++
    this.setState({ conter })
  }
  render() {
    const { conter } = this.state
    return (
      <div>
        <h2>{conter}</h2>
        {/* 向子组件中传入一个事件 */}
        <ConterButton getConter={this.changeConter()}/>
      </div>
    )
  }
}
export default App

子组件在按钮发生点击时, 对父组件的传递的函数进行回调,

import React, { Component } from 'react'

export class ConterButton extends Component {

  btnClick() {
    // 当按钮发生点击事件时, 对父组件传递过来的函数进行回调
    this.props.getConter()
  }
  render() {
    return (
      <div>
        <button onClick={this.btnClick}>+1</button>
      </div>
    )
  }
}
export default ConterButton

3.2 refs 与事件冒泡

父组件通过React.createRef()创建Ref，保存在实例属性myRef上。父组件中，渲染子组件时，定义一个Ref属性，值为刚创建的myRef。
父组件调用子组件的myFunc函数，传递一个参数，子组件接收到参数，打印出参数。
参数从父组件传递给子组件，完成了父组件向子组件通信。

import React, { Component, Fragment } from 'react';
class Son extends Component {
    myFunc(name) {
        console.log(name);
    }
    render() {
        return <div></div>;
    }
}

// 父组件
export default class Father extends Component {
        this.myRef = React.createRef();
    componentDidMount() {
        // 调用子组件的函数，传递一个参数
        this.myRef.current.myFunc('Jack');
    }
    render() {
        return (
            <div>
                <Son ref={this.myRef} />
            </div>
        );
    }
}

3.3 详解通信与类型限制

在这里插入图片描述 1. 类型限制安装prop-types库
2. 导入 import PropTypes from ‘prop-types’
3. 使用 static propTypes={ 要限制的key:PropTypes.类型.是否必传}

类型限制官网链接参考

3.4 消息订阅-发布机制

下载: npm install pubsub-js --save

使用: import PubSub from ‘pubsub-js’
订阅 PubSub.subscribe(‘delete’, function(data){ });
发布 PubSub.publish(‘delete’, data)

组件A订阅信息

// A组件内的状态
state = {
    users:[],
    isFirst:true,
    isLoading:false,
    err:''
}
// 订阅了消息名为updateState的消息事件
componentDidMount(){
 // 方法返回两个值（第一个值是订阅与发布共有的属性，第二个是接受发布的信息）
    this.token = PubSub.subscribe('updateState',(_,data)=>{
        this.setState(data) // 将收到的状态data更新
    })
  }
// 页面销毁前删除消息订阅 以防消息泄露
componentWillUnmount(){
  PubSub.unsubscribe(this.token)
}

组件B发布信息

// 发布消息名为updateState的消息事件
PubSub.publish('updateState',{isFirst:false,isLoading:true})
axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(res=>{
      PubSub.publish('updateState',{users:res.data.items,isLoading:false})
}).catch(err=>{
      PubSub.publish('updateState',{err:err.message,isLoading:false})
})

3.4.1 React18 eventBus使用

安装 npm i hy-event-store
创建实例

import { HYEventBus } from "hy-event-store"
const eventBus = new HYEventBus()
export default eventBus

emit 传递事件

 nextClick() {
    eventBus.emit("bannerNext", {nickname: "kobe", level: 99})
  }

on 监听事件

 componentDidMount() {
    eventBus.on("bannerNext", this.bannerNextClick, this)
  }

销毁，防止内存泄漏

 componentWillUnmount() {
    eventBus.off("bannerNext", this.bannerNextClick)
  }

4. 路由

下载 react-router-dom: npm install --save react-router-dom

4.1 路由的基本使用

在原生中页面的跳转我们可以直接使用a标签跳转，但是react中，需要使用link
导航区的a标签改为Link标签

<Link to="/xxxxx">Demo</Link>

展示区写Route标签进行路径的匹配

//  component 包裹要切换的组件
<Route path='/xxxx' component={Demo}/>

<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

import React, { Component } from "react";
import { Link, BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home/index";
import About from "./components/About/index";
   /* BrowserRouter 只能有一个包裹因此可以调整到index中包裹 */
export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <Link className="list-group-item" to="/about">About</Link>
              <Link className="list-group-item" to="/home">Home</Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

4.2 Navlink 的选中样式

  {/* Link 与NavLik的区别 activeClassName="选中的类名" */}
  <NavLink activeClassName="demo01" className="list-group-item" to="/about">About= </NavLink>
   {/* <NavLink className="list-group-item" to="/about"> About </NavLink> */}
  <NavLink className="list-group-item" to="/home"> Home</NavLink>

navlink的选中样式参考链接

4.2.1标签体的内容children

封装公共MyNavlink组件，this.props可以接受组件的传值

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
export default class MyNavLink extends Component {
  render() {
    // const { to } = this.props;
		console.log(this.props);
		// 1. this.props可以直接接受标签体的属性
		// 2. < NavLink children />  可直接展开显示children对应的value值
    return (
      <div>
        <NavLink className="list-group-item" {...this.props} />
      </div>
    );
  }
}

1.2 路由组件跳转，传值

 <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 编写路由链接 */}
              {/* Link 与NavLik的区别 activeClassName="" */}
              {/* 1.children 对应的value about 可以不写在标签题里面 */}
              <MyNavLink to="/about" >About</MyNavLink>
              <MyNavLink to="/home" children="Home" />
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>

在这里插入图片描述

4.3 Swith 单一匹配

通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。

默认情况下，单个path相同时，会匹配component注册的所有页面

<Switch> 单一匹配，它的独特之处在于它专门呈现路由

在这里插入图片描述

4.4 模糊路由与精准匹配

1.默认使用的是模糊匹配:【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>

4.5 路由重定向`Redirect`

参考链接

4.6 嵌套路由

嵌套路由可以采用模糊匹配或者精准匹配

to="/home" 代表一级路由，to="/home/news" 二级路由

<div>
 <ul className="nav nav-tabs">
    <li><MyNavLink to="/home/news">News</MyNavLink></li>
    <li><MyNavLink to="/home/message">Message</MyNavLink></li>
  </ul>
						{/* 注册路由 */}
		<Switch><Route path="/home/news" component={News}/>
				<Route path="/home/message" component={Message}/>
				<Redirect to="/home/news"/>
		</Switch>
</div>

4.7 路由组件中的传参

4.7.1 params传参

需要link 标签传参时，在路由上必须接受传递的参数
接受传递的参数用this.props.match.params

4.7.2 Search传参

search传参，在路由上不需要接受传递的参数
路由组件使用传递的参数用this.props.location.search
获取到的search是urlencoded编码字符串，需要借助querystring解析

在这里插入图片描述

4.7.3 state传参

state传递参数一般包含path与state，path路径，state传的属性与值
路由组件中接受传递的值使用this.props.location.state

在这里插入图片描述

4.7.4 总结

	1.params参数
		路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
		注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>`
		接收参数：this.props.match.params
	2.search参数
		路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
		注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
		接收参数：this.props.location.search
		备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
	3.state参数
		路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
		注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
		接收参数：this.props.location.state
		备注：刷新也可以保留住参数

4.8 编程式导航

注意点 区分普通组件与路由组件，在普通组件中不能使用路由组件的API，比如：push,replace等，要想使用需要借助 withRouter 对普通组件进行包裹

编程式导航借助this.prosp.history对象上的API对操作路由跳转、前进、后退
主要有 push(),replace(),go(),goback()等

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'
export default class Message extends Component {
	state = {
		messageArr:[
			{id:'01',title:'消息1'},
			{id:'02',title:'消息2'},
			{id:'03',title:'消息3'},
		]
	}
	replaceShow = (id,title)=>{
		//replace跳转+携带params参数
		//this.props.history.replace(`/home/message/detail/${id}/${title}`)
		//replace跳转+携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
		//replace跳转+携带state参数
		this.props.history.replace(`/home/message/detail`,{id,title})
	}
	pushShow = (id,title)=>{
		//push跳转+携带params参数
		// this.props.history.push(`/home/message/detail/${id}/${title}`)
		//push跳转+携带search参数
		// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
		//push跳转+携带state参数
		this.props.history.push(`/home/message/detail`,{id,title})
	}
	back = ()=>{
		this.props.history.goBack()
	}
	forward = ()=>{
		this.props.history.goForward()
	}
	go = ()=>{
		this.props.history.go(-2)
	}
	render() {
		const {messageArr} = this.state
		return (
			<div>
				<ul>
					{
						messageArr.map((msgObj)=>{
							return (
								<li key={msgObj.id}>

									{/* 向路由组件传递params参数 */}
									{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

									{/* 向路由组件传递search参数 */}
									{/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

									{/* 向路由组件传递state参数 */}
									<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

									&nbsp;<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
									&nbsp;<button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
								</li>
							)
						})
					}
				</ul>
				<hr/>
				{/* 声明接收params参数 */}
				{/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

				{/* search参数无需声明接收，正常注册路由即可 */}
				{/* <Route path="/home/message/detail" component={Detail}/> */}

				{/* state参数无需声明接收，正常注册路由即可 */}
				<Route path="/home/message/detail" component={Detail}/>
				<button onClick={this.back}>回退</button>&nbsp;
				<button onClick={this.forward}>前进</button>&nbsp;
				<button onClick={this.go}>go</button>

			</div>
		)
	}
}

4.9 BrowserRouter与HashRouter的区别

底层原理不一样：
- BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
- HashRouter使用的是URL的哈希值。
path表现形式不一样
- BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
- HashRouter的路径包含#,例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响
- BrowserRouter没有任何影响，因为state保存在history对象中。
- HashRouter刷新后会导致路由state参数的丢失！！！
HashRouter可以用于解决一些路径错误相关的问题。

4.react-router6+版本

React Router 以三个不同的包发布到 npm 上，它们分别为：
1. react-router: 路由的核心库，提供了很多的：组件、钩子。
2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。
3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。
与React Router 5.x 版本相比，改变了什么？
1. 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。
2. 语法的变化：component={About} 变为 element={<About/>}等。
3. 新增多个hook：useParams、useNavigate、useMatch等。

4.1 .Component

v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。
<Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。
<Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
<Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。
当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件。
<Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

4.1.1 `<Routes/> 与 <Route/>`

     <>
            <Link to="/about">About</Link>
            <Link to="/home">Home</Link>
        <ul className="nav">
          {/* 注册路由 */}
          <Routes>
            <Route path="/about" element={<About />}></Route>
            <Route path="/home" element={<Home />}></Route>
          </Routes>
        </ul>
      </>

4.1.2 `<Link> 与<NavLink>`

注意: 外侧需要用<BrowserRouter>或<HashRouter>包裹。
NavLink与<Link>组件类似，且可实现导航的“高亮”效果。
示例代码：

  <Link to="/路径">Home</Link>
  <NavLink className={computedClassName} to="路径">Home</NavLink>

NavLink高亮效果的实现

   // 注意: NavLink默认类名是active，下面是指定自定义的class
   //自定义样式
   <NavLink
       to="login"
       className={({ isActive }) => {
           console.log('home', isActive)
           return isActive ? 'base one' : 'base'
       }}
   >login</NavLink>
   /*
   	默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
   	当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
   */
   <NavLink to="home" end >home</NavLink>

4.1.3. `<Navigate>`

作用：只要<Navigate>组件被渲染，就会修改路径，切换视图。
replace属性用于控制跳转模式（push 或 replace，默认是push）。

   <Routes>
            <Route path="/about" element={<About />}></Route>
            <Route path="/home" element={<Home />}></Route>
            {/* 默认为push模式，replace为true时跳转为replace  */}
            <Route path="/" element={<Navigate to="/home" replace={true} />}></Route>
  </Routes>

4.1.4 `<Outlet>`

当<Route>产生嵌套时，渲染其对应的后续子路由。既指定路由呈现位置

const RoutesList = [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "message",
        element: <Message />,
      },
      {
        path: "news",
        element: <News />,
      },
    ],
  },
];

// 二级路由
 <div className="NavContetn">
	{/* 指定路由组件呈现的位置Outlet */}
	<Outlet />
 </div>

4.2 路由Hooks

动态路由的传参
- 比如/detail的path对应一个组件Detail；
- 如果我们将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route，并且进行显示；

// router
	{
		path: '/detail/:id/:title',
		element: <Details />
	},
//navigate 传参，注意函数式组件与类组件
 navigate(`/detail/${id}/${title}`, { replace: true })

4.2.1 useRoutes()

作用：根据路由表，动态创建<Routes>和<Route>。

   //路由表配置：src/routes/index.js
   import About from '../pages/About'
   import Home from '../pages/Home'
   import {Navigate} from 'react-router-dom'
   export default [
   	{
   		path:'/about',
   		element:<About/>
   	},
   	{
   		path:'/home',
   		element:<Home/>
   	},
   	{
   		path:'/',
   		element:<Navigate to="/about"/>
   	}
   ]
   
   //App.jsx
   import React from 'react'
   import {NavLink,useRoutes} from 'react-router-dom'
   import routes from './routes'
   
   export default function App() {
   	//根据路由表生成对应的路由规则
   	const element = useRoutes(routes)
   	return (
   		<div>
   			......
         {/* 注册路由 */}
         {element}
   		  ......
   		</div>
   	)
   }

4.2.2 useNavigate()编程式导航

作用：返回一个函数用来实现编程式导航。

   import React from 'react'
   import {useNavigate} from 'react-router-dom'
   export default function Demo() {
     const navigate = useNavigate()
     const handle = () => {
       //第一种使用方式：指定具体的路径
       navigate('/login', {
         replace: false,
         state: {a:1, b:2}
       }) 
       //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
       navigate(-1)
     }
     
     return (
       <div>
         <button onClick={handle}>按钮</button>
       </div>
     )
   }

4.2.3 useParams()

作用：返回当前匹配路由的params参数，类似于5.x中的match.params。

//  路由表
 children: [
          {
            path: "details/:name",
            element: <Details />,
          },
        ],
//导航路由传参
 <NavLink to={`Details?name=${UserInfo.name}`}> Details</NavLink>
// useParams接受参数
import { useParams } from 'react-router-dom'
export default function Details() {
	const add=useParams()
	return (
    <div>
         {add.name}	
    </div>
  );
}

4.2.4 ueSearchParams()

作用：用于读取和修改当前位置的 URL 中的查询字符串。
返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

//导航路由传参
  <NavLink to={`Details?name=${UserInfo.name}`}> Details</NavLink>
//接受参数
import { useSearchParams } from "react-router-dom";
export default function Details() {
	//  setSearch 用于更新search 参数
  const [search, setSearch] = useSearchParams();
	console.log(search,setSearch);
	// setSearch('name="user"');
	//  返回的一个函数
	 const name = search.get("name");
  return (
    <div> <li>{name}</li></div>
  );
}

4.2.5 useLocation() state传参

作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

//导航路由传参
 <NavLink to="details" state={{ name: UserInfo.name }}> Details</NavLink>
//接受参数
import React from "react";
import { useLocation } from "react-router-dom";
export default function Details() {
 const {state:{name}}= useLocation();
	
  return (
    <div>
        <li>{name}</li>
    </div>
  );
}

4.2.6. useMatch()

作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

   <Route path="/login/:page/:pageSize" element={<Login />}/>
   <NavLink to="/login/1/10">登录</NavLink>
   export default function Login() {
     const match = useMatch('/login/:x/:y')
     console.log(match) //输出match对象
     //match对象内容如下：
     /*
     	{
         params: {x: '1', y: '10'}
         pathname: "/LoGin/1/10"  
         pathnameBase: "/LoGin/1/10"
         pattern: {
         	path: '/login/:x/:y', 
         	caseSensitive: false, 
         	end: false
         }
       }
     */
     return (
     	<div>
         <h1>Login</h1>
       </div>
     )
   }

4.2.7 useInRouterContext()

作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

4.2.8 useNavigationType()

作用：返回当前的导航类型（用户是如何来到当前页面的）。
返回值：POP、PUSH、REPLACE。
备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。
作用：给定一个 URL值，解析其中的：path、search、hash值。

4.3 补充类组件增强 withRouter

类组件不能使用hooks,因此封装高阶组件转换为函数式组件对类组件做增强


// hoc/index.js
import { useLocation, useNavigate, useParams } from 'react-router-dom';
export function withRouter(WapperWithRouter) {
	return function (props) {
		const navigate = useNavigate()
		const params=useParams()
		const location = useLocation ()
		const router = { navigate, params, location }
		return < WapperWithRouter  {...props} router={router} />
	}
}

import React, { Component } from 'react';
import { Link, Outlet } from 'react-router-dom';
import { withRouter } from '../../hoc';
 class About extends Component {
	navigateTo(path){
   console.log(path);
	 console.log(this.props.router.navigate(path));
	}
	render() {
		return (
			<div>
				<Link to="/about/recommend">音乐列表展示</Link>
				<Link to="actor"> 音乐艺人展示</Link>
				{/* 注意路径的匹配  to 与path保持一致 */}
				<button  onClick={()=>this.navigateTo('classqa')}> 类组件如何实现跳转</button>
				<div>
					<Outlet />
				</div>
			</div>
		)
	}
}
export default withRouter(About)

至此类组件的props就有了路由的一些属性可以用navigate

5. redux

参考
 参考2

6. React Hooks 及其扩展

在函数式组件中并没有this，因此React提供的Hooks，这就让你在函数式组件中可以使用state或其他特性
常使用的Hooks有 React.useState()，React.useEffect(), React.useRef()

6.1 setState的两种用法

注意点 ： setState更新是异步的

6.1.1 对象更新

setState(stateChange, [callback])------对象式的setState
1. stateChange为状态改变对象(该对象可以体现出状态的更改)
2. callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

   this.setState({count},()=>{
        console.log(this.state.count);
   })
   // 或者
   this.setState({count:count+1})

6.1.2 函数回调式更新

setState(updater, [callback])------函数式的setState
1. updater为返回stateChange对象的函数。
2. updater可以接收到state和props。
3. callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

函数回调直接接受 state

 this.setState((state)=>( { count: state.count+1 }))

6.2 Hooks 之 useState

State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作

 语法: const [xxx, setXxx] = React.useState(initValue)

useState()说明:
- 参数: 第一次初始化指定的值在内部作缓存
- 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
setXxx()2种写法:
- setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
- setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

import React from "react";
// 1. 注意点 函数式组件命名 首字母大写
// 2. useState 初始调用后会把值缓存起来，不会因为函数的再次调用把count重新赋值为0
// 3.hooks 必须在最顶层使用 不能在if for 等使用
// 4.useState 如果没有传递参数，那么初始化值为undefined
// 5. 箭头函数写法  const DemoCount= React.memo(()=>{ })
export default function DemoCount(params) {
  // 第一个是返回的值， 第二个参数返回一个函数设置第一个返回的值
  let [count, setCount] = React.useState(0);
  function add() {
    // count++;
    // setCount(count); //第一种写法
    setCount(count=>count+1)
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={add}>点击+1</button>
       <button onClick={()=>setCount(count-1)}>点击-1</button>
    </div>
  );
}

6.3 Hooks之useEffect

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类似组件中的生命周期钩子)

React中的副作用操作:
- 发ajax请求数据获取
- 设置订阅 / 启动定时器
- 手动更改真实DOM

语法: useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

可以把 useEffect Hook 看做如下三个函数的组合

  componentDidMount()
  componentDidUpdate()
  componentWillUnmount()

// 卸载组件
import React from "react";
function App() {
  const [showChild, setShowChild] = React.useState(true);
  function unmound() {
    setShowChild(false);
  }
  return (
    <>
      {showChild && <DemoCount />}
      <button onClick={unmound}>卸载组件</button>
    </>
  );
}
// useEffect 相当于componentDidMount，或者 componentDidUpdate （主要看第二个值传不传）
function DemoCount() {
  let [count, setCount] = React.useState(0);
  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
    return () => {
      // 返回值为清除定时器
      clearInterval(timer);
    };
  }, []); // 传一个数组，表示检测谁，（默认不传,检测所有，传空数组谁也不检测）
  function add() {
    setCount((count) => count + 1);
  }
  return (
    <div className="id">
      <h1>{count}</h1>
      <button onClick={add}>点击+1</button>
    </div>
  );
}
export default App;

6.4 Hooks之useRef

Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据

 语法: const refContainer = useRef()

function App() {
  const myrefs = React.useRef();
  function getRefsValue() {
    console.log(myrefs.current.value);
  }
  return (
    <div>
      <input ref={myrefs} type='text' />
      <button onClick={getRefsValue}>ref</button>
    </div>
  );
}

6.5 Fragment代替根标签

render 函数中都都需一个根标签，这样会都渲染一个不需要的dom节点，利用Fragment代替就不会渲染

import React, { Fragment } from "react";
// Fragment 忽略标签，|| <></> 区别在于是否需要key 
function App() {
  const myrefs = React.useRef();
  function getRefsValue() {
    console.log(myrefs.current.value);
  }
  return (
      <Fragment>
        <input ref={myrefs} type="text" />
        <button onClick={getRefsValue}>ref</button>
      </Fragment>
  );
}

6.6 Context的使用

Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props
Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差

6.6.1 提供的API

React.createContext

使用此API可以创建一个Context对象，组件会从最近的Provider中读取对应的值。只有当组件所处的树种不存在Provider时，defaultValue参数才会生效

const MyContext = React.createContext(defaultValue);

Context.Provider

Context对象会返回一个Provider组件

Provider接受一个value属性，传递给消费组件当Provider的value属性值更变时，内部的所有消费组件都会重新渲染
context会根据引用标识进行重新渲染，所以当向value传递一个对象时，需要注意：当Provider重新渲染时，可能会触发Consumer意外渲染。为了防止这种情况，将value状态提升到父节点的state中

<MyContext.Provider value={某个值}/>

Context.Consumer

Context对象会返回一个Consumer组件

需要一个函数作为子元素，函数接收context值，返回一个React节点
传递给函数的value值等价于组件树上方离这个context最近的Provider提供的value值。如果没有对应的Provider，value参数等同传递给createContext()的defaultValue

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

Class.contextType

此属性可以让你使用this.context来获取最近Context上的值。你可以在任何生命周期中访问到它，包括render函数中

const MyContext = React.createContext()
class MyClass extends React.Component {
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}
MyClass.contextType = MyContext

同时，你也可以使用实验性的public class fields语法中的static类属性初始化contextType ，此外一般都是使用第二种用法

const MyContext = React.createContext()
class MyClass extends React.Component {
  static contextType = MyContext
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

6.6.2 注意点

在使用时，类组件使用Provider, Consumer 可以用于类组件和函数式组件

// A->B->C ， context 组件通信
import React, { Component } from "react";
// 需求C组件展示A组件的Name
// 创建上下文context
const MyContext = React.createContext();
export default class App extends Component {
  state = {
    name: "我是A组件，需要在C组件中展示",
    nameInfo: "A组件的详细信息",
  };
  render() {
    const { name, nameInfo } = this.state;
    return (
      <div>
        <h2>A</h2>
        <h5>----------------------</h5>
        <MyContext.Provider value={{ name, nameInfo }}>
          <B />
        </MyContext.Provider>
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <>
        <h2> B</h2>
        <h5>----------------------</h5>
        <C />
      </>
    );
  }
}
// class C extends Component {
//   // 声明接受context
//   static contextType = MyContext;
//   render() {
//     console.log(this.context); //
//     return (
//       <div>
//         <h2>C</h2>
//         {/* <a href="1">{this.context}</a> */}
//         <h5>----------------------</h5>
//       </div>
//     );
//   }
// }
// 函数式组件使用context,Provider只使用于类组件, Consumer 可以用于类组件和函数式组件
function C() {
  return (
    <div>
      <h2>C</h2>
      <MyContext.Consumer>  
        {
          value=> {
            return `${value.name}`
          }
        }
      </MyContext.Consumer>
      <h5>----------------------</h5>
    </div>
  );
}

6.3 useContext

Context Hook允许我们通过Hook来直接获取某个Context的值

import React, { memo, useEffect, useState } from 'react';
// import { ThemeContext } from './context/themContext';
// import { MyUserInfoContext } from './context/userInfo';
import Hooks from './hooks';
//  自定义hooks 需要以use开头
function useSumApp(Name) {
  useEffect(() => {
    console.log(Name)
    return () => {
      console.log(Name)
    }
  }, [Name])
}

const App01 = memo(() => {
  // const themeStyleContext = useContext(ThemeContext)
  // const userInfoContext = useContext(MyUserInfoContext)
  const [themeStyleContext, userInfoContext] = Hooks()
  console.log(themeStyleContext);
  useSumApp('App01')
  return (
    <div>App01</div>
  )
})
const App02 = memo(() => {
  // const themeStyleContext = useContext(ThemeContext)
  // const userInfoContext = useContext(MyUserInfoContext)
  useSumApp('App02')
  return (
    <div>App02</div>
  )
})

const App = memo(() => {
  const [isShow, setIsShow] = useState(true)

  return (
    <div>
      <button onClick={() => setIsShow(!isShow)}>updata Component</button>
      {isShow && <App01 />}
      {isShow && <App02 />}
    </div>
  )
})

export default App

hooks的封装

import { ThemeContext } from './context/themContext';
import { MyUserInfoContext } from './context/userInfo';

import { useContext } from 'react';

export default function Hooks() {
	const themeStyleContext = useContext(ThemeContext)
	const userInfoContext = useContext(MyUserInfoContext)
	return [themeStyleContext, userInfoContext]
}

6.7 PureComponent 拒接子组件render重新渲染

注意点 ，只要调用setState 父子组件中的render函数都会调用

避免上述情况，可以采用的方案为：

重写shouldComponentUpdate()方法比较新旧state或props数据, 如果有变化才返回true,
如果没有返回false

  shouldComponentUpdate(nextProps, nextState) {
    // 这里可以判断是否更新子组件的render 当nextState与this.state的值相同时，返回false不同返回ture ，简单点说就是阀门是否打开
    if (nextState.name === this.state.name) {
      return false;
    } else {
      return true;
    }
  }

使用PureComponent PureComponent重写了shouldComponentUpdate(),
只有state或props数据有变化才返回true 注意: 只是进行state和props数据的浅比较,
如果只是数据对象内部数据变了, 返回false 不要直接修改state数据, 而是要产生新数据

import React, { PureComponent } from "react";
// PureComponent 判断 子组件是否使用父组件的内容，数据更新时是否调用子组件的render
export default class App extends PureComponent {}

6.8 render props 插槽

Vue中: 使用slot技术, 也就是通过组件标签体传入结构
React中:使用children props: 通过组件标签体传入结构，使用render props: 通过组件标签属性传入结构, 一般用render函数属性

6.8.1 `this.props.children` 渲染

1. A组件使用
<B>
  <C>xxxx</C>
</B>
2. 在B要使用C组件中调用 {this.props.children}渲染

但是上面也存在一个问题: 如果B组件需要A组件内的数据, ==> 做不到

6.8.2 `this.props` 渲染

// 父组件传递
 const btn = <button>按钮2</button>;
  <NavBarTwo
    leftSlot={btn}
     centerSlot={<h2>呵呵呵</h2>}
      rightSlot={<i>斜体2</i>}
   />
// 子组件
const { leftSlot, centerSlot, rightSlot } = this.props

    return (
      <div className='nav-bar'>
        <div className="left">{leftSlot}</div>
        <div className="center">{centerSlot}</div>
        <div className="right">{rightSlot}</div>
      </div>

图解

6.8.3 `render props` 渲染

<B render={(data) => <C data={data}></C>}></B>
B组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

图解

代码参考

 import React, { PureComponent } from "react";
export default class App extends PureComponent {
  render() {
    return (
      <div style={{ width: "1200px", height: "300px", background: "red" }}>
        <h2>A</h2>
        <h5>--------App------------</h5>
        {/* 相当于Vue里面的插槽, */}
        <B render={(name) => <C name={name} />} />
      </div>
    );
  }
}
class B extends PureComponent {
  state = { name: "我是B组件需要在C组件展示" };
  render() {
    console.log("@,render Children");
    return (
      <div
        style={{
          width: "300px",
          height: "200px",
          margin: "0 auto",
          background: "#fff",
        }}
      >
        <h2> B 组件</h2>
        <h5>----------------------</h5>
        {/* 调用C组件的render */}
        {/* {this.props.children}       */}
        {/* 第二种方式:预留插槽 */}
        {this.props.render(this.state.name)}
      </div>
    );
  }
}
class C extends PureComponent {
  render() {
    return (
      <div style={{ background: "#0f03d6", color: "#fff", height: "80px" }}>
        <h2> C 组件</h2>
        <a href="ccc" style={{color:'#ddcc00'}}> {this.props.name}</a>
      </div>
    );
  }
}

6.9 错误异常边界

错误边界：用来捕获后代组件错误，渲染出备用页面
只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
使用

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}
componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平

开放原子开发者工作坊

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

开放原子开发者工作坊

所有评论(0)

查看更多评论

ik i5

@weixin_46104934

已为社区贡献2条内容

React教程（由浅到深）

ik i5

文章目录

1. 基本语法

1.1 初体验Hello React

1.2 JSX语法的基本使用

1.2.1 语句与表达式说明

1.3. React面向组件编程

1.3.1 函数组件与类组件

1.4 组件实例的三大特性

1.4.1 state数据存储状态

1.4.2 props的使用

1.4.2.1基本使用

1.4.2.2 做限制类型，默认值使用

1.4.2.3 简写方式

1.4.2.4 函数组件中使用props

1.4.3 refs的使用

1.4.3.1 直接使用ref绑定字符串

1.4.3.2 回调函数的形式

1.4.3.3 createRef的方式

1.5. React事件处理与委托

1.6.受控组件与非受控组件

1.6.1 非受控组件

1.6.2受控组件

1.7. 高阶函数与函数柯里化

1.7.1 柯里化回调

1.7.2 高阶回调

1.8. 组件的生命周期

1.8.1 旧生命周期

1.8.2 新生命周期

1.8.3 _getSnapshotBeforeUpdate的使用场景

2. react脚手架基本配置

2.1 创建项目与项目基本结构

2.2 全局样式与模块样式

2.3 配置代理，fetch与axios发送请求

2.3.1 代理配置

2.3.2 fetch发送网络请求

3 组件间的通信

3.1 父子通信，props ，事件

3.2 refs 与 事件冒泡

3.3 详解通信与类型限制

3.4 消息订阅-发布机制

3.4.1 React18 eventBus使用

4. 路由

4.1 路由的基本使用

4.2 Navlink 的选中样式

4.2.1标签体的内容children

4.3 Swith 单一匹配

4.4 模糊路由与精准匹配

4.5 路由重定向Redirect

4.6 嵌套路由

4.7 路由组件中的传参

4.7.1 params传参

4.7.2 Search传参

4.7.3 state传参

4.7.4 总结

4.8 编程式导航

4.9 BrowserRouter与HashRouter的区别

4.react-router6+版本

4.1 .Component

4.1.1 <Routes/> 与 <Route/>

4.1.2 <Link> 与<NavLink>

4.1.3. <Navigate>

4.1.4 <Outlet>

4.2 路由Hooks

4.2.1 useRoutes()

4.2.2 useNavigate()编程式导航

4.2.3 useParams()

4.2.4 ueSearchParams()

4.2.5 useLocation() state传参

4.2.6. useMatch()

4.2.7 useInRouterContext()

4.2.8 useNavigationType()

4.3 补充 类组件增强 withRouter

5. redux

6. React Hooks 及其扩展

6.1 setState的两种用法

6.1.1 对象更新

6.1.2 函数回调式更新

6.2 Hooks 之 useState

3.2 refs 与事件冒泡

4.5 路由重定向`Redirect`

4.1.1 `<Routes/> 与 <Route/>`

4.1.2 `<Link> 与<NavLink>`

4.1.3. `<Navigate>`

4.1.4 `<Outlet>`

4.3 补充类组件增强 withRouter

6.8.1 `this.props.children` 渲染

6.8.2 `this.props` 渲染

6.8.3 `render props` 渲染