day2组件通信，生命周期，路由

2023-04-13 12:22| 来源: 网络整理| 查看: 265

1：父传子

函数组件通过参数接收，类组件通过this.props接收

父组件的值改变时子组件自动改变，props是只读的不允许修改。（子组件直接更改props没有效果）

1.1：在函数组件中

父：子： const Demo = (props) => { //通过props接收。这里可以直接解构{car,money} return ( 我是Demo {props.car} //使用 {props.money} ) }

1.2:在类组件中

父：子： class Hellow extends Component { render() { console.log(this.props) const { car, money } = this.props //通过this.props接收 return ( 我是类组件 {car}-{money} ) } }2:子传父在父组件中定义一个接受函数，传给子组件子组件props接收调用import { useState } from 'react' import reactDOM from 'react-dom' const Element = () => { const [sonVal, setSonVal] = useState('') const changeUname = (uname) => { //接收函数 console.log('接收到了', uname) setSonVal(uname) } return ( 我是父组件接收到的子组件值：{sonVal} ) } const Child = ({ changeUname }) => { const [uname, setUname] = useState('') const onChange = (e) => { setUname(e.target.value) //双向绑定 changeUname(e.target.value) //子传父 } return ( 我是子组件 ) } reactDOM.render(, document.getElementById('root'))3:兄弟组件

思想：状态提升，用父子通信解决。把传递的数据放到父组件里面，再父传子接收

const Element = () => { const [jackSay, getjackSay] = useState('') //1:把传递的数据放到父类里面。功能：jack传rose，jack先传给父类，父类再传给rose return ( 我是根组件 ) } const Jack = ({ getjackSay }) => { //2:父传子 const jackSayMethod = () => { getjackSay('您好') } return ( 我是Jack组件 jack说 ) } const Rose = ({ jackSay }) => { //3：子传父 return ( 我是Rose组件 {jackSay} ) }4：context跨组件传递(redux内部原理)传统方式：兄弟组件传递时父子之间一层一层传，当层级很多时很不方便更好方式：使用context跨级传递。最佳用redux传递数据

5：插槽，props的children属性

children属性(父传子)：表示该组件的子节点，只要组件有子节点，props就有该属性

const App = () => { return ( 我是根组件 Children父传子 //插槽父传子，写在组件中间 ) } const Child = (props) => { return ( 我是子组件 {props.children} //用children接收 ) }

6:V16.8之前生命周期

3个阶段:挂载阶段，更新阶段，卸载阶段

6.1：挂载阶段有3个钩子函数

construct， render，componentDidMount

class App extends Component { constructor(props) { //提供数据，提供ref，此时没有DOM super(props) console.log(1, 'constructor') //第一步执行constructor } render() { //只用来渲染解构 console.log(2, 'render') return app组件 } componentDidMount() { //发送网络请求，操作DOM。Dom已经挂载好了。（不能掉setState） console.log(3, 'componentDidMount') } }6.2：更新阶段两个钩子

render， componentDidUpdate

render //每次组件渲染都会触发。挂载阶段和更新阶段 componentDidUpdate //DOM操作，可以获取到更新后的DOM内容（不能掉setState）6.3：卸载时一个钩子

componentWillUnmount。卸载时。 //做资源释放

7：路由

1：安装

pnpm add react-router-dom@6

2：导入

import { HashRouter as Router, Link, Route } from 'react-router-dom' //取别名HashRouter, //整个路由组件Link, //替换a标签。首页 Route。指定路由规则。 //HashRouter包裹我是APP组件{' '} 首页 //link跳转我的音乐 //Route，路径和组件联系起来 7.3：Router一个react应用只需要使用一次两种常用Router：HashRouter 和 BrowserRouter

hash带#号，history（常用）不带#。

7.4：link 与 NavLink (两者默认都是模糊匹配)

都相当于a链接，NavLink有高亮 (激活后会自动添加active类名)

点击跳转 //将active类名改为aa。exact 属性，路由精确匹配7.5：Route。指定路由规则

switch作用：用来处理404页面，如果将来多个路由规则能够匹配到，只会让第一个渲染出来。switch包Route

//Switch配合404页面 //该页面就是404页面，当前面的路由没有时加载 vue里面 {path:'*',component:Login} 来处理404页面

7.6：嵌套路由

二级路由必须嵌套一级路由

7.7:重定向 //精确匹配 7.8：编程式导航this.$router.push('/home') //vue中

在vue中

/detail/:id 获取方法：this.$route.params.id

在react中

编程式路由

props.router.push('')

【本文地址】

公司简介

联系我们