React入门笔记（四）：React生命周期、插槽、路由

最新推荐文章于 2022-08-31 16:42:44 发布
最新推荐文章于 2022-08-31 16:42:44 发布
阅读量288 收藏
点赞数
分类专栏： 前端 文章标签： react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18297883/article/details/106910307
版权

五、React生命周期

5.1、钩子函数

生命周期即是组件从实例化到渲染到最终从页面销毁，整个过程就是生命周期，在这个生命周期中，我们有许多可以调用的事件，我们也俗称为钩子函数

生命周期的三个状态：

  1. Mounting:将组件插入到dom中
  2. 将数据更新到dom中
  3. unmounting:将组件移除dom

生命周期中的钩子函数（方法或事件）

  1. ComponentWillMount：组件将要渲染，Ajax，添加动画前的类
  2. ComponentDidMount：组件渲染完毕，添加动画
  3. ComponentWillReceiveProps：组件将要接收props数据，查看接收的props数据是什么
  4. ShouldComponentUpdate:组件接收到新的state或者props，判断是否要更新，返回布尔值
  5. ComponentWillUpdate：组件将要更新
  6. ComponentDidUpdate：组件已经更新
  7. ComponentWillUnmount：组件将要卸载
import React, { Component } from "react";
import ReactDOM from "react-dom";

class ComLife extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "你好",
    };
    console.log("constructor构造函数");
  }

  componentWillMount() {
    console.log("componentWillMount组件将要渲染");
  }

  componentDidMount() {
    console.log("componentDidMount组件渲染完毕");
  }

  componentWillReceiveProps() {
    console.log("componentWillReceiveProps组件将要接受新的状态state和props");
  }

  shouldComponentUpdate() {
    //如果希望更新就返回为真，不希望更新就返回为false
    console.log("进行判断是否要更新");
    if (this.state.msg === "你好") {
      return true;
    } else {
      return false;
    }
  }

  componentWillUpdate() {
    console.log("componentWillUpdate组件将要更新");
  }

  componentDidUpdate() {
    console.log("componentDidUpdate组件更新完毕");
  }

  componentWillUnmount() {
    console.log("componentWillUnmount组件将要移除");
  }

  changeMsg = () => {
    this.setState({
      msg: "你好，陈",
    });
  };

  render() {
    console.log("render渲染函数");
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.changeMsg}>组件更新</button>
      </div>
    );
  }
}

class ParentCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: true,
    };
  }

  removeCom = () => {
    this.setState({
      isShow: false,
    });
  };

  render() {
    if (this.state.isShow) {
      return (
        <div>
          <button onClick={this.removeCom}>移除ComLife</button>
          <ComLife />
        </div>
      );
    } else {
      return <h1>将ComLif移除</h1>;
    }
  }
}

ReactDOM.render(<ParentCom />, document.getElementById("root"));

image-20200621201157072

image-20200621201208463

六、React插槽

6.1、插槽介绍

在组件中写入内容，这些内容可以被识别和控制。react需要自己开发支持插槽功能。

6.2、使用props.children实现插槽

原理：组件中写入的HTML可以传入到props中

import React, { Component } from "react";
import ReactDOM from "react-dom";

class ParentCom extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>组件插槽</h1>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  <ParentCom>
    <h2>子组件1</h2>
    <h2>子组件2</h2>
    <h2>子组件3</h2>
  </ParentCom>,
  document.getElementById("root")
);

image-20200622191143265

插槽也可以获取元素的值：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class ParentCom extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>组件插槽</h1>
        {this.props.children}
      </div>
    );
  }
}

class RootCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [1, 2, 3],
    };
  }
  render() {
    return (
      <ParentCom>
        <h2 data-name="a" data-index={this.state.arr[0]}>
          子组件1
        </h2>
        <h2 data-name="b" data-index={this.state.arr[1]}>
          子组件2
        </h2>
        <h2 data-name="c" data-index={this.state.arr[2]}>
          子组件3
        </h2>
      </ParentCom>
    );
  }
}

ReactDOM.render(<RootCom></RootCom>, document.getElementById("root"));

image-20200622191829249

在做一个小例子，通过获取插槽内元素的值来动态的判断div放置的位置：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class ParentCom extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>组件插槽</h1>
        {this.props.children}
        <ChildCom>
          <h1 data-position="header">这是放置到头部的内容</h1>
          <h1 data-position="main">这是主要的内容</h1>
          <h1 data-position="footer">这是放置到尾部的内容</h1>
        </ChildCom>
      </div>
    );
  }
}

class ChildCom extends Component{
  render(){
    let headerCom,mainCom,footerCom
    this.props.children.forEach((item,index)=>{
      if(item.props['data-position']==='header'){
        headerCom = item
      }else if(item.props['data-position']==='main'){
        mainCom = item
      }else{
        footerCom = item
      }
    })
    return(
      <div>
        <div className="header">
          {headerCom}
        </div>
        <div className="main">
          {mainCom}
        </div>
        <div className="footer">
          {footerCom}
        </div>
      </div>
    )
  }
}

class RootCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [1, 2, 3],
    };
  }
  render() {
    return (
      <ParentCom>
        <h2 data-name="a" data-index={this.state.arr[0]}>
          子组件1
        </h2>
        <h2 data-name="b" data-index={this.state.arr[1]}>
          子组件2
        </h2>
        <h2 data-name="c" data-index={this.state.arr[2]}>
          子组件3
        </h2>
      </ParentCom>
    );
  }
}

ReactDOM.render(<RootCom></RootCom>, document.getElementById("root"));

image-20200622192707337

组件中的HTML直接可全部插入，也可以通过条件判断来决定插入的位置

七、React路由

7.1、路由介绍

根据不同的路径，显示不同的组件（内容）：React使用的库：react-router-dom：

安装：

yarn add react-router-dom  或 npm install --save add react-router-dom
7.2、路由三大组件
  • Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器
  • Route：路由规则匹配组件，显示当前规则对应的组件
  • Link：路由跳转的组件

注意：如果要精确匹配，那么可以在Route上设置exact属性

使用history模式制作一个建议的导航：

import React, { Component } from 'react';
// hash模式
// import {HashRouter as Router,Link,Route} from 'react-router-dom'

// history模式 后端配合使用
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'


function Home(){
  return(
    <div>
      <h1>首页</h1>
    </div>
  )
}

function Me(){
  return(
    <div>
      <h1>个人中心</h1>
    </div>
  )
}

function Product(){
  return(
    <div>
      <h1>产品页面</h1>
    </div>
  )
}

class App extends Component{
  render(){
    return(
      <div id="app">
        <Router  basename="/admin">
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to="/me">个人中心</Link>
          </div>
          <Route path="/" exact component={Home}></Route>
          <Route path="/product" component={Product}></Route>
          <Route path="/me" component={Me}></Route>
        </Router>
      </div>
    )
  }
}

export default App;

image-20200622194804418

可以通过设置basename来规定根路径，也可以使用exact来达到精确匹配,Router可以在一个组件写多个

import React, { Component } from "react";
// hash模式
// import {HashRouter as Router,Link,Route} from 'react-router-dom'

// history模式 后端配合使用
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>admin首页</h1>
    </div>
  );
}

function Me() {
  return (
    <div>
      <h1>admin个人中心</h1>
    </div>
  );
}

function Product() {
  return (
    <div>
      <h1>admin产品页面</h1>
    </div>
  );
}

class App extends Component {
  render() {
    return (
      <div id="app">
        <div>所有页面普通内容</div>
        <Router>
          <Route path="/" exact component={() => <div>首页</div>}></Route>
          <Route path="/me" component={() => <div>个人中心</div>}></Route>
          <Route path="/product" component={() => <div>产品</div>}></Route>
        </Router>
        <Router>
          {/* <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to="/me">个人中心</Link>
          </div> */}
          <Route path="/admin/" exact component={Home}></Route>
          <Route path="/admin/product" component={Product}></Route>
          <Route path="/admin/me" exact component={Me}></Route>
        </Router>
      </div>
    );
  }
}

export default App;

Link组件中的to可以直接写路径，也可以通过对象，进行更详细的配置

render() {
    let meObj = {
      pathname: "/me",//跳转的路径
      search: "?username=admin",//get请求的参数
      hash: "#abc",//设置的hash值
      state: { msg: "hello" },//传入组件的数据
    };
    return (
      <div id="app">
        <div>所有页面普通内容</div>
        <Router>
          <Route path="/" exact component={() => <div>首页</div>}></Route>
          <Route path="/me" component={() => <div>个人中心</div>}></Route>
          <Route path="/product" component={() => <div>产品</div>}></Route>
        </Router>
        <Router>
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to={meObj}>个人中心</Link>
          </div>
          <Route path="/admin/" exact component={Home}></Route>
          <Route path="/admin/product" component={Product}></Route>
          <Route path="/admin/me" exact component={Me}></Route>
        </Router>
      </div>
    );
  }

Link的replace属性，点击链接后，将新地址替换成历史访问记录的原地址

<Link to={meObj} replace>个人中心</Link>
7.3、动态路由实现
function News(props){
  console.log(props)
  return(
    <div>
      新闻页
      新闻id:{props.match.params.id}
    </div>

  )
}

...

<Router>
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to="/news/456789">新闻页面</Link>
            <Link to={meObj} replace>个人中心</Link>
          </div>
          <Route path="/admin/" exact component={Home}></Route>
          <Route path="/admin/product" component={Product}></Route>
          <Route path="/admin/me" exact component={Me}></Route>
          <Route path="/news/:id" component={News}></Route>
        </Router>

image-20200622202336013

7.4、重定向组件

如果访问访问某个组件时，如果有重定向组件，那么就会修改页面路径，使得页面的内容显示为所定向路径的内容：

import React, { Component } from "react";
// hash模式
// import {HashRouter as Router,Link,Route} from 'react-router-dom'

// history模式 后端配合使用
import {
  BrowserRouter as Router,
  Link,
  Route,
  Redirect,
} from "react-router-dom";

function LoginInfo(props) {
  // props.LoginState = 'success'
  // props.LoginState = 'fail'
  if (props.location.state.loginState === "success") {
    return <Redirect to="/admin"></Redirect>;
  } else {
    return <Redirect to="/login"></Redirect>;
  }
}

let FormCom = () => {
  let pathObj = {
    pathname:"/login_info",
    state:{
      loginState:"success"
    }
  }
  return (
    <div>
      <h1>表单验证</h1>
      <Link to={pathObj}>登陆验证后页面</Link>
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Route path="/" exact component={() => <h1>首页</h1>}></Route>
          <Route path="/form" exact component={FormCom}></Route>
          <Route path="/login" exact component={() => <h1>登陆页</h1>}></Route>
          <Route path="/login_info" exact component={LoginInfo}></Route>
          <Route path="/admin" exact component={() => <h1>admin页，登录成功</h1>}></Route>
        </Router>
      </div>
    );
  }
}

export default App;
7.5、Switch组件

让Switch组件内容的route只匹配一个，只要匹配到了，剩余的路由规则将不被匹配

render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route path="/" exact component={() => <h1>首页</h1>}></Route>
            <Route path="/form" exact component={FormCom}></Route>
            <Route path="/login" exact component={() => <h1>登陆页</h1>}></Route>
            <Route path="/login_info" exact component={LoginInfo}></Route>
            <Route path="/admin" exact component={() => <h1>admin页，登录成功</h1>}></Route>
            <Route path="/abc" exact component={() => <h1>abc1</h1>}></Route>
            <Route path="/abc" exact component={() => <h1>abc2</h1>}></Route>
          </Switch>
        </Router>
      </div>
    );
  }

image-20200622210156066

7.6、使用js跳转页面

使用props的histroy中的属性和方法来进行页面路由的跳转：

class ChildCom extends Component{

  clickEvent = () =>{
    //console.log(this.props)
    this.props.history.push('/',{msg:"这是由ChildCom发给首页的数据"})
    this.props.history.replace('/',{msg:"这是由ChildCom发给首页的数据"})
      //前进
    this.props.history.go(1)
    this.props.history.goForward(1)
    //后退
    this.props.history.go(-1)
    this.props.history.goBack(-1)
  }

  render(){
    return(
      <div>
        <button onClick={this.clickEvent}>跳转到首页</button>
      </div>
    )
  }
}

image-20200622211116940

props.match可以获取到动态路由传递的参数：

<Route path="/:id" exact component={(props) => {console.log(props); return (<h1>首页</h1>)}}></Route>

image-20200622211538258

干巴爹兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 生命周期
wxy201008的博客
02-07 336
React 生命周期 React 是一个由虚拟 DOM 渲染成真实 DOM 的过程，这个过程称为组件的生命周期。React 把这个周期划分为三个阶段，每个阶段都提供了 will 和 did 两种处理方式，will 是指发生前，did 是指发生后。 Mounting：组件渲染过程 componentWillMount() componentDidMount() Updating：组件更新过程 componentWillReceiveProps(nextProps) shouldComponentUp
React内置便捷函数、生命周期、路由
weixin_43291695的博客
10-15 855
React内置便捷函数 React.children.map(children, function[(thisArg)]); React.children.forEach(children, function[(thisArg)]); 优点：内置函数可以解决children为单个或者没有的情况下不是数组类型无法遍历，单个的children为object对象，如果没有的话就是undefined...
react 简介 路由及生命周期
web修理工
08-13 444
全局下载react 脚手架 npm install -g create-react-app 创建项目 create-react-app my-app // my-app 为自己的demo名称 更新npm(报错) npm cache clean --force //清缓存 npm install npm -g // 重新下载npm npm install -g create-react-app //全局下载react 脚手架 create-react-app my-app //创建项目
React生命周期，react-router路由
weixin_46389205的博客
10-08 809
React生命周期，react-router路由组件的生命周期react-router路由 组件的生命周期 组件在初始化时会触发5个钩子函数： 1、getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性。 2、getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。 3、componentWillMount() 组件初始化时只
React——实现插槽
qq812457115的博客
07-26 425
代码】React——实现插槽。
React生命周期原理与用法踩坑笔记
10-15
React生命周期是React组件在其存在期间经历的一系列阶段，这些阶段提供了对组件状态和行为的控制。在React 16.3之前，生命周期方法分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。然而...
react 生命周期实例分析
10-15
React生命周期是指React组件在其创建、渲染、更新和销毁过程中经历的一系列方法调用。这些方法提供了在特定阶段插入自定义逻辑的机会，使得我们可以更好地控制组件的行为。本文将深入探讨React组件的生命周期，通过...
ReactNative中组件的生命周期
02-25
就像Android开发中的View一样，ReactNative（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN组件的生命周期整理如下图...
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
react生命周期整理
小敏哥的专栏
01-06 959
react中的生命周期可以分为四大类，分别为定义时触发，渲染时触发，更新时触发以及卸载时触发。本文章会对所有生命周期进行归纳并从源码的角度解析其实现原理（写到一半发现文章已经有点长了，决定新开一片文章来解析实现原理，传送门） 定义时触发（createClass） getDefaultProps 该生命周期是在定义组件的时候触发，其返回的对象可以用于设置默认的 props，由于这个方法是在构造...
React 插槽 路由 重定向 Redux React-redux
zjq_supperman的博客
11-05 253
本文用于总结React常用知识。 1 React插槽 原理：组件中写入的HTML，可以传入到props中 使用{this.props.children}将子组件遍历展示 import React from 'react'; import ReactDOM from 'react-dom'; export default class App extends React.Component { render() { return( <div>
react生命周期钩子函数
weixin_44937463的博客
06-18 107
生命周期钩子函数 组件初始化阶段 constructor 通过super来继承父类身上传递过来的属性，让后当前组件通过this.props接收 用来初始化一个状态 用来初始化绑定一个方法，将this传递给这个方法 注意： 不写方法的触发（ 订阅 ） 不写具有副作用的代码（ 比如： 计时器 ） static getDerivedStateFromProps (nextProps, p...
React（12）组合（类似 Vue 组件的插槽）和继承
qq20004604的博客
02-12 7254
18、组合（类似 Vue 组件的插槽） 在Vue中，假如我们需要让子组件的一部分内容，被父组件控制，而不是被子组件控制，那么我们会采用插槽的写法 &lt;slot&gt;&lt;/slot&gt; 在 React 里也有类似的写法，父组件写法是相同的，但子组件是采用 {this.props.children} 来实现。 示例： class MyChild extends React....
react基础（jsx，组件，react-dom，react-router-dom，red ux，脚手架安装+新旧生命周期+通信...）
lwg112233的博客
10-25 574
概念： react 是目前最流行的框架;其中是采用 mvvm 的思想，让我们把所有的只关注视图层和逻辑层 react 的创始人：Facebook； js 的创始人：布兰登 艾奇； react由：(jsx，组件，react-dom)，和他的全家桶技术（react-router-dom，redux） jsx：用于将jsx转化js语法 react-router-dom：路由 react-dom：虚拟dom redux：管理数...
React路由react-router-dom
weixin_41105030的博客
04-01 1043
文档分享 react-router react-router-dom Ant Design of React webpack配置React React router和React-router-dom React router React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。 当我们使用它的时...
React 路由管理 - React-Router-Dom
weixin_41154070的博客
09-07 277
react-router-dom 5.3.0 react-router-dom 在导出 react-router 方法的基础上添加了 **BrowserRouter HashRouter Link NavLink ** BrowserRouter 将 history 作为 Router组件的属性 2.HashRouter 将 hash history 作为 Router 组件的属性 Link ...
React生命周期详解
最新发布
Amelian的博客
08-31 1万+
前言 react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......
React Router--3.4 组件生命周期
jiangbo110119的博客
01-18 791
组件生命周期在开发应用时，理解路由组件的生命周期是非常重要的。 后面我们会以获取数据这个最常见的场景为例，介绍一下路由改变时，路由组件生命周期的变化情况。路由组件的生命周期和 React 组件相比并没有什么不同。 所以让我们先忽略路由部分，只考虑在不同 URL 下，这些组件是如何被渲染的。路由配置如下：Route path="/" component={App}> IndexRoute com
React系列八——进入离开路由地址、查询符及生命周期
可芭乐的博客
03-01 1742
onEnter：进入路由地址 onLeave：离开路由地址 使用方式： function handleEnter() { console.log('进入') } function handleLeave() { console.log('进入') } &lt;Route path="/shows/:id" component={Show} onEnter={...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值