2025年react获取地址栏参数（react获取页面元素）

大家好，我是讯享网，很高兴认识大家。

下载

npm install -g create-react-app

安装

npx create-react-app xxx 推荐

npm init react-app xxx

yarn create react-app xxx

讯享网

class => className

const title =

讯享网

index.js

讯享网

Hello.js

讯享网

讯享网

讯享网

讯享网

受控组件

讯享网

多表单元素优化

非受控组件

讯享网

props

讯享网

讯享网

父传子

子传父

讯享网

兄弟相传

拆分组件式

index.js :

讯享网

Child1.js :

Child2.js :

讯享网

类似于vue的 vuex

步骤

代码

讯享网

讯享网

children属性 props.children

props校验约束规则默认值

讯享网

创建钩子函数触发时机作用 constructor 创建组件时 1.初始化state 2.为事件处理绑定this render 每次组件渲染时都会触发渲染UI 注意不能调用setState() componentDidMount 组件挂载后(完成DOM渲染) 1.发送网络请求 2.DOM操作

更新钩子函数触发时机作用 render 每次组件渲染都会触发渲染UI 挂载阶段是同一个render componentDidUpdate 组件更新后 1. 发送网络请求 1. DOM操作注意如果要setState() 必须放在一个 if 条件中

卸载钩子函数触发时机作用 componentWillUnmount 组件卸载(从页面中消失) 执行清理工作 (清除定时器)

讯享网

class App extends React.Component {

constructor(props) {
console.log(‘constructor’)
super(props)
this.state = {
num: 0
}
}
handerNum = () => {
this.setState({
num: this.state.num + 1
})

// 演示强制更新
// this.forceUpdate()
}

render() {
console.log(‘render’)
return (

)
}
}

class Numb extends React.Component {
render() {
console.log(‘子组件——render’)
return (

)
}

// 如果调用setState 必须放在if中
componentDidUpdate(prevProps) {
console.log(‘子组件生命周期 componentDidUpdate’)

// 获取DOM
console.log(document.getElementById(‘title’))

// this.setState({}) 报错会递归更新

}
}

ReactDOM.render(, document.getElementById(‘root’))

“`

卸载钩子函数触发时机作用 componentWillUnmount 组件卸载(从页面中消失)

讯享网 执行清理工作 (清除定时器) </td></tr></tbody></div>

react组件复用

复用相似功能

复用什么？ 1. state 2. 操作state的方法

两种方式 1. render props模式 2.高阶组件(HOC)

思路：将要复用的state和操作state的方法封装到一个组件中

讯享网

render props模式 children代替render属性

render props 代码优化添加props校验

讯享网

高阶组件

使用步骤

1.创建一个函数名称以with开头

2.指定函数参数参数以大写字母开头（作为要渲染的组件）

3.在函数内部创建一个类组件，提供复用的状态逻辑代码并返回

4.在该组件中渲染参数组件同时将状态通过prop传递给参数组件

5. 调用该高阶组件传入要增强的组件通过返回值拿到增强后的组件渲染页面

function withMouse (WrapperComponent){

class Mouse extends React.Component{}

return Mouse

}

Mouse组件的render方法中

return

displayName属性

讯享网

高阶组件传递props

setState的说明

讯享网

setState 第二个参数

讯享网

讯享网

案例

通过props避免不必要的重新渲染

讯享网

纯组件 (内部自动实现shouldComponentUpdate)

讯享网

npx create-react-app hkzf

yarn start

2. 组件库 antd-mobile

1 打开文档 http://ant-design-mobile.antgroup.com/zh/components/button

3. 配置基础路由

yarn add react-router-dom

import { BrowserRouter as Router, Route, Routes, Link } from ‘react-router-dom’

4. 外观和样式调整

index.css

讯享网

5. 两种布局页面

有tabber页面
无tabbar页面

6. 嵌套路由

v6版本

v6之前版本：

讯享网

1.关闭 eslint

package.json 中修改