react
文章平均质量分 79
阿昊在
卷不动来华子打螺丝
展开
-
【React】路由(详解)
单页应用程序 SPA:路由:前端路由:后端路由:路由的基本使用使用步骤常用组件说明BrowserRouter和HashRouter的区别路由的执行过程默认路由精确匹配Switch的使用重定向路由嵌套路由向路由组件传递参数1.params参数2.search参数3.state参数编程式路由导航withRouter原创 2022-03-18 12:36:18 · 6037 阅读 · 0 评论 -
【React】生命周期(最新)
目录各个阶段生命周期函数constructor()static getDerivedStateFromProps(nextProps, state)render()componentDidMount()shouldComponentUpdate(nextProps, nextState)getSnapshotBeforeUpdate(prevProps, prevState)componentDidUpdate(prevProps, prevState, snapshot..原创 2022-03-17 15:23:59 · 1817 阅读 · 0 评论 -
【React】组件间四种通信方式
在 React 中,父子组件的通信是常见的问题,除了使用状态管理工具(redux)以外,也可以实现父子组件的相互通信。在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:父组件向子组件通信:使用 props子组件向父组件通信:使用 props 回调跨级组件间通信:使用 context 对象非嵌套组件间通信:使用事件订阅原创 2022-03-11 17:37:28 · 1010 阅读 · 1 评论 -
【React】三大属性之state、props、ref
目录1.state1、状态类型为不可变类型2、状态类型为数组3、状态的类型是普通对象2.propsprops属性特点父组件给子组件传递数据:3.RefsReact.createRef()1.stateReact把每一个有状态的组件都看成是一个状态机,组件内部通过state来维护组件状态的变化。在事件中触发setState()来修改state数据,state改变后会重新进行render()在需要对用户输入、服务器请求或者时间变化等做出响应时,使用stat原创 2022-03-11 16:43:51 · 2206 阅读 · 0 评论 -
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的。一、受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只有继承React.Component才会有状态. 受控组件必须要在表单上使用onChange事件来绑定对应的事件.import React, { Component } from 'react'export default cl原创 2022-03-11 15:28:44 · 5065 阅读 · 0 评论 -
【React】中渲染列表、添加点击事件
渲染列表例如有如下数组:['11','22','33']在react中可以用数组的map方法:import React, { Component } from 'react'export default class App extends Component { constructor(props){ super(props) this.state = { list: ['11','22','33'], }原创 2022-03-10 23:49:58 · 2224 阅读 · 0 评论 -
React的路由——react-router-dom
安装 cnpm i react-router-dom -S; npm i react-router-dom -S引入 hash路由:HashRouter import { HashRouter } from 'react-router-dom' history路由:BrowserRouter import { HistoryRouter } from 'react-router-dom' 注意 路由的所有配置项必须在HashRouter...原创 2021-11-15 09:23:43 · 858 阅读 · 0 评论 -
受控组件与非受控组件
1、每当表单的状态发生变化时,都会被写入到组件的state中2、在受控组件中,组件渲染出的状态与它的value或checked prop相对应3、react受控组件更新state的流程<1> 通过在初始state中设置表单的默认值<2> 每当表单的值发生变化时,调用onChange事件处理器<3> 事件处理器通过合成对象e拿到改变后的状态,并更新应用的state<4> SetState触发视图的重新渲染,完成表单组件值的更新示例如下:.原创 2021-11-15 08:44:02 · 423 阅读 · 0 评论