精华内容
下载资源
问答
  • 隐藏组件时,保留其内部状态。 尝试该系列中的其他库! , , 概述 该组件有助于在隐藏选项卡(或页面)时保留其内部状态,从而无需在切换选项卡时将状态提升到父级或中央存储以保存状态。 用法 简单用法 const ...
  • 通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染 <!--动态组件-component使用--> <div class="app">...

    通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染

    
      <!--动态组件-component使用-->
      <div class="app">
      <ul>
        <li @click="currView='home'">首页</li>
        <li @click="currView='abount'">关于我们</li>
      </ul>
      <!--通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留-->
      <keep-alive>
       <component :is="currView"></component>
      </keep-alive>
      </div>
    <script type="text/x-Template" id="homeTemp">
         <h2>首页数据</h2>
    </script>
    <script type="text/x-Template" id="abountTemp">
         <h2>关于我们数据<input type="text"/></h2>
    </script>
    <script type="text/javascript">
     var vm=new Vue({
       el:'.app',
       data:{
         currView:"home"
       },
       components:{
         "home":{
              template:"#homeTemp"
         },
         "abount":{
           template:"#abountTemp"
         }
       }
     });
    
    </script>

    展开全文
  • vue--keep-alive保存组件状态

    千次阅读 2018-04-09 14:56:35
    概述:动态组件的切换过程中走的... 把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染 .include - 字符串或正则表达式。只有匹配的组件会被缓存。 .exclude - 字符串或正则表达式。任何匹配的组件都不...

    概述:动态组件的切换过程中走的改变:切换走了->会销毁;切回来->重新构建(渲染)一次;所以组件状态不会保留


    1.保留组件的状态,用keep-alive(模拟场景注册流程中的下一步下一步)
    . 把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染
    .include - 字符串或正则表达式。只有匹配的组件会被缓存。
    .exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存

    2. 用了keep-alive,保留了组件状态且不会重新渲染,这样会导致created(){}钩子函数不会再次触发(模拟场景,留言板)
    vue提供了专门的钩子函数
    activated//用于keep-alive激活
    destroyed//用于keeo-alive停用

    展开全文
  • 当我问自己第一百次时,我正在研究一个典型的CRUD屏幕:“我应该将状态保留在这个组件中还是将其移动到父组件?”。 如果需要对子组件状态进行轻微控制。您可能也遇到了同样的问题。 让我们通过一个简单的例子和​...
  • React的无状态和有状态组件

    千次阅读 2018-06-21 16:11:29
    众所周知,React是一个专注于View层的前端框架,组件也】是React核心理念之一,...在了解React中的无状态和有状态组件之前,先来了解在React中创建组件的三种方式: ES5写法:React.createClass; ES6写法:Reac...

    众所周知,React是一个专注于View层的前端框架,组件也】是React核心理念之一,一个完整的应用将由一个个独立的组件拼装而成,组件也是React最基础的一部分,学习React就需要先学习组件。

    React中创建组件的方式

    在了解React中的无状态和有状态的组件之前,先来了解在React中创建组件的三种方式:

    • ES5写法:React.createClass;
    • ES6写法:React.Component;
    • 无状态的函数写法,又称为纯组件SFC。

    React.createClass

    React.createClass是React刚开始推荐的创建组件的方式。这是ES5的原生的JavaScript来实现的React组件。React.createClass这个方法构建一个组件“类”,它接受一个对象为参数,对象中必须声明一个render()方法,render()方法将返回一个组件实例。例如:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    const SwitchButton = React.createClass({
        getDefaultProp: function () {
            return {open: false}
        }, 
        getInitialState: function () {
            return {open: this.props.open};
        }, 
        handleClick: function (event) {
            this.setState({open: !this.state.open});
        }, 
        render: function () {
            var open = this.state.open, className = open ? 'switch-button open' : 'btn-switch';
            return (
                <label className={className} onClick={this.handleClick.bind(this)}> 
                    <input type="checkbox" checked={open}/></label> );
        }
    });
    ReactDOM.render(<SwitchButton/>, document.getElementById('root'));
    

    React.createClass是用来创建有状态的组件,这些组件在使用时是要被实例化的,并且可以访问组件的生命周期方法。不过React.createClass创建React组件有其自身的问题存在:

    • React.createClass会自动绑定函数方法,导致不必要的性能开销,增加代发过时的可能性;
    • React.createClass的mixins不够自然、直观,易读性差。

    React.Component

    React.Component是以ES6的形式来创建React组件,也是现在React官方推荐的创建组件的方式,其和React.createClass创建的组件一样,也是创建有状态的组件。React.Component正在逐渐取代React.createClass,上面的例子使用React.Component实现如下。

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class SwitchButton extends React.Component {
        constructor(props) {
            super(props)
            this.state = {open: this.props.open}
            this.handleClick = this.handleClick.bind(this)
        }
    
        handleClick(event) {
            this.setState({open: !this.state.open})
        }
    
        render() {
            let open = this.state.open, className = open ? 'switch-button open' : 'btn-switch'
            return (<label className={className} onClick={this.handleClick}> 
                <input type="checkbox" checked={open}/> 男
            </label> )
        }
    }
    
    SwitchButton.defaultProps = {open: false}
    ReactDOM.render(<SwitchButton/>, document.getElementById('root'))
    

    相比React.createClass方式,React.Component带来了诸多语法上的改进

    import

    ES6使用import方式替代ES5的require方式来导入模块,其中import { }可以直接从模块中导入变量名,此种写法更加简洁直观。

    初始化 state

    在ES6的语法规则中,React的组件使用的类继承的方式来实现,去掉了ES5的getInitialState的hook函数,state的初始化则放在constructor构造函数中声明。

    this绑定

    React.Component创建组件时,事件函数并不会自动绑定this,需要我们手动绑定,不然this将不会指向当前组件的实例对象。
    以下有三种绑定this的方法:
    1,在constructor中使用bind()进行硬绑定。

    constructor() {
      this.handleClick = this.handleClick.bind(this);
    }
    1. 直接在元素上使用bind()绑定。
    <label className={className} onClick={this.handleClick.bind(this)}>
    1. ES6 有个很有用的语法糖:Arrow Function(箭头函数)它可以很方便的使this直接指向class SwitchButton。
    <label className={className} onClick={()=>this.handleClick()}>

    无状态组件

    无状态的函数创建的组件是无状态组件,它是一种只负责展示的纯组件,它的特点是不需要管理状态state,数据直接通过props传入,这也符合 React 单向数据流的思想。例如:

    function HelloComponent(props) {
        return <div>Hello {props.name}</div>
    }
    
    ReactDOM.render(<HelloComponent name="marlon"/>, mountNode)
    

    对于这种无状态的组件,使用函数式的方式声明,会使得代码的可读性更好,并能大大减少代码量,箭头函数则是函数式写法的最佳搭档。

    const Todo = (props) => (
        <li onClick={props.onClick} 
            style={{textDecoration: props.complete ? "line-through" : "none"}}> 
            {props.text}
            </li> )
    

    上面定义的 Todo 组件,输入输出数据完全由props决定,而且不会产生任何副作用,对于props为 Object 类型时,还可以使用 ES6 的解构赋值。

    const Todo = ({onClick, complete, text, ...props}) => (
        <li onClick={onClick} style={{textDecoration: complete ? "line-through" : "none"}} {...props} >
            {props.text} 
            </li> )
    

    无状态组件一般会搭配高阶组件(简称:HOC)一起使用,高阶组件用来托管state,Redux 框架就是通过 store 管理数据源和所有状态,其中所有负责展示的组件都使用无状态函数式的写法。

    无状态组件内部其实是可以使用ref功能的,虽然不能通过this.refs访问到,但是可以通过将ref内容保存到无状态组件内部的一个本地变量中获取到。例如,下面这段代码可以使用ref来获取组件挂载到DOM中后所指向的DOM元素:

    function TestComp(props) {
        let ref;
        return ( 
            <div ref={(node) => ref = node}></div> )
    }

    无状态组件 vs 有状态组件

    无状态组件:无状态组件(Stateless Component)是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性(props)加上一个渲染函数(render)。由于不涉及到状态的更新,所以这种组件的复用性也最强。

    有状态组件:在无状态组件的基础上,如果组件内部包含状态(state)且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件(Stateful Component)。有状态组件通常会带有生命周期(lifecycle),用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。

    在React中,我们通常通过props和state来处理两种类型的数据。props是只读的,只能由父组件设置。state在组件内定义,在组件的生命周期中可以更改。基本上,无状态组件(也称为哑组件)使用props来存储数据,而有状态组件(也称为智能组件)使用state来存储数据。

    总的来说:无状态函数式写法 优于React.createClass,而React.Component优于React.createClass。能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

    展开全文
  • keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下
  • 第五章:React从入门到进阶之组件化开发及Props属性传值 第六章:React从入门到进阶之state及组件的生命周期 第七章:React从入门到进阶之React事件处理 第八章:React从入门到进阶之React条件渲染 第九章:React从...
  • Stoxy是配备有Web组件状态管理API。 Stoxy使您可以轻松处理,持久化和更新DOM中的数据,而无需框架的负担。 :open_book: 官方文档 官方文档可以在找到 :red_question_mark: 如何 Stoxy利用浏览器的工具来处理...
  • 保持组件状态并避免重复渲染的组件。 English | :sparkles: 特征 不基于React Router,因此您可以在需要缓存的任何地方使用它。 您可以轻松地包装组件以保持它们的生命。 因为它不受display: none | block控制...
  • 好久没写vue勉强算个vue新手,最近做vue项目时候,有个需求是在 nav 切换模块时,刷新当前组件页面的内容,同时又要保证打开的其他组件没被关闭 : 就是在这里选择时,刷新当前router组件的内容。 在网上查了查,...
  • 深入理解React 组件状态(State)

    千次阅读 2017-06-27 17:30:49
    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据。如何定义State定义一个合适的State,是正确创建组件的第一步。...
  • 切换保持组件当前状态 <component :is='变量'></component> 切换组件: (1)变量的值即为组件名,使用时需在data属性中声明,且不加/ (2)变量的值为哪个组件名即代表哪个组件 保持当前组件状态...
  • 不可避免地,您会遇到需要在组件中使用状态的情况。 甚至更可怕的是,必须使用React类组件的某些生命周期方法。 然后,您会遇到各种各样的问题:您是否保留了SFC的美丽简洁性( :hugging_face: )还是将其重写为...
  • vue 动态保存组件状态 keep-alive

    千次阅读 2020-05-03 20:37:44
    组件有时候需要保存状态 1,使用keep-alive把组件包裹起来 <!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则...
  • 1. 场景 ... 但是切换时,Vue路由默认地会重新加载每个路由页面,现在的需求就是想实现保留每...标签包裹起来,注意exclude="Dashboard"属性表示不保留状态的页面组件名称。 <keep-alive exclude="Dashboard"> &l
  • 该软件包基于Redux保留其所有优点,使集中式状态管理更接近于组件体系结构。 产生的好处是: :check_mark_button: 大大减少项目中的代码行 :check_mark_button: 降低代码复杂度 :check_mark_button: 增加可...
  • flutter 隐藏且不保留位置组件Offstage

    千次阅读 2020-04-21 17:44:30
    offstage: 布尔值, 当为true时,将隐藏组件且不保留空间位置 child: 组件, ) 代码示例: class _HomeState extends State<Home> { @override Widget build(BuildContext context) { return Container( .....
  • vue 页面切换时保存之前的组件状态

    千次阅读 2021-01-21 20:03:45
    // 判断是否有搜索缓存 if (this.$store.state.demandSearchOpts !== null) { let t = this.$store.state.demandSearchOpts this.searchObjs = t.searchOpts console.log(this.searchObjs) ...
  • vue-router 实现组件的缓存之 keep-alive

    千次阅读 2017-11-01 15:55:46
    keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法: <!-- 该组件将被缓存! --> </keep-alive>props include-字符串或正则表达式,只有匹配的组件会被缓存 exclude-字符...
  • vue单页应用如何在页面刷新时保留状态数据

    万次阅读 多人点赞 2018-06-20 11:12:20
    在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你一、问题现在产品上有个需求:单页...
  • vue如何在页面刷新时保留状态信息

    千次阅读 2019-09-07 21:41:16
    2、 监听页面刷新,触发存取操作 首先在入口组件App.vue中的created中利用localstorage或者sessionStorage来存取state中的数据 // 在页面加载时读取sessionStorage里的状态信息 if ( sessionStorage.getItem('state'...
  • 当然如果精力允许,你也可以自定义数字键盘是最好的,网上也有很多Vue数字键盘组件。 踩坑:一但用了input[type=number]类型有很多的坑。 vue在申明表单model的时候必须是整形,要不然一堆红报...
  • React组件详解

    千次阅读 2018-07-19 23:08:31
    3.6.1 React组件简介 众所周知,组件作为React的核心内容,是View...所谓无状态组件,就是没有状态控制的组件,只做纯静态展示的作用,无状态组件是最基本的组件形式,它由属性props和渲染函数render构成。由于不涉...
  • keep-alive Props: include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则...和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。 当组件在 ...
  • 关于AntD Table组件selectedRows翻页后不保留上一页已选中items的解决方案问题描述解决方案(伪,主要B叨B,可以跳过)解决方案(真) 问题描述 在用antd Table组件写一个产品选择框功能的时候,遇到了antd Table...
  • step1: el-table 标签,指定 row-key 属性 step2: el-table-column 中设置了type=selection 的列,指定 reserve-selection 属性 ...(属性值为 true / false,true 代表保留, false代表不保留
  • Vue 解决 组件切换 组件没有被销毁

    千次阅读 2020-05-11 14:19:16
    Vue 解决 组件切换组件未销毁 解决方法 去掉 keep-alive <router-view keep-alive ></router-view> 解析: keep-alive 保留 组件状态 不销毁 去掉 keep-alive 不保留组件状态
  • slot分发内容为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 <slot> 元素作为原始内容的插槽。 问题(编译作用域)message 应该绑定到父组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 133,525
精华内容 53,410
关键字:

组件保留状态