组件类型_unity 在编辑器按组件类型搜索组件 - CSDN
  • 最近项目基本都是用 React,今天总结分享 React Component 常见的几种形式,如果你在写 React 时经常不知道怎么拆分代码,这篇文章或许对你有所帮助。 ...为了更充分理解 React,先搞懂平时写的 JSX 是什么。...

    最近项目基本都是用 React,今天总结分享 React Component 常见的几种形式,如果你在写 React 时经常不知道怎么拆分代码,这篇文章或许对你有所帮助。

    原文链接: w3ctrain.com/2018/11/05/…

    为了更充分理解 React,先搞懂平时写的 JSX 是什么。初学的时候有比较大困惑,这是一门新语言吗?大部分人是匆匆扫过文档就开始开发。通过 babel-presets-react 处理能看到,其实 JSX 只是语法糖,最终在浏览器跑的还是 JS。React Component 最终都通过 React.createElement 创建。总之,写 React 其实就是在写 JS

    SFC (Stateless Functional Component)

    React 可以使用 Function 来创建 Component,这类 Component 没有 lifecycle, 内部不维护 state,只要传入的 props 有变化则进行重新渲染。

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    复制代码

    用箭头函数的写法还更加简洁。

    const Welcome = props => <h1>Hello, {props.name}</h1>;
    复制代码

    上面两种形式生成 es5 代码都是一样的。

    var Welcome = function Welcome(props) {
      return _react2.default.createElement(
        "h1",
        null,
        "Hello, ",
        props.name
      );
    };
    复制代码

    SFC 的特点是纯粹只做 render,代码简短没有其他条件分支,并且相比 class Component 编译后的代码量会少一些。

    尴尬的是,在 React 16.7 react hooks 出来之后,SFC 这个名字有歧义了,因为用上 useState,SFC 也可以有 local state, 同样可以拥有 lifecycle。再称之为 Stateless Components 就很尴尬,改名叫 FC ?

    HOC (Higher-Order Components)

    高阶组件对于 Vue 开发者来说应该是个陌生的概念(不知道,我用 Vue 的时候没见过类似的用法)。从代码上看,高阶组件就是一个方法,传入一个组件,返回另一个组件。

    function logProps(WrappedComponent) {
      return class extends React.Component {
        componentWillReceiveProps(nextProps) {
          console.log('Current props: ', this.props);
          console.log('Next props: ', nextProps);
        }
        render() {
          return <WrappedComponent {...this.props} />;
        }
      }
    }
    复制代码

    最常见的高阶组件是 react-redux 里面的 connect 方法,通过传入 组件和 map*ToProps 方法,让组件和 store 连接。组件内部就可以直接通过 props 获得 connect 之后的值。

    exprot default connect(
      mapStateToProps,
      mapDispatchToProps,
    )(Component);
    复制代码

    高阶组件适合用来扩展功能,把这部分功能从业务组件中抽离出来,需要的套上,不需要的时候移除,对被包裹组件侵入性非常小。

    Dynamic Component

    有些业务场景下,在执行时才能确定具体的标签或者组件是什么。在 React 的世界里面,以大写字母开头会被当成动态组件加载,而小写字母开头会被认为是 HTML DOM tag。

    // Heading.js
    render() {
        const { tag: Tag, children } = this.props;
        return <Tag>{ children }</Tag>
    }
    复制代码

    根据万物皆为 JS 理论,只要传入不同的 tag 标签,就会渲染出不同的 heading 标签。

    我们常用这种方式,在后端配置组件和数据,前端读取配置之后渲染出对应的内容。

    FaCC(Functions as Child Components)

    React children 还可以是 Function 类型,如果直接调用它会什么写法? 比如封装一个 Loading 组件,会给 children 提供 loading 参数,业务组件再根据 loading 判断需要 render 什么内容。

    class LoadArea extends Component {
      state = {
        loading: true,
      };
    
      componentDidMount() {
        asyncFunc()
            .then(() => {
                this.setState({
                  loading: false,
                })
            })
            .catch(() => {
                this.setState({
                  loading: false,
                })
            })
      }
    
      render() {
        return (
          <React.Fragment>
            {this.props.children({
              ...this.props,
              ...this.state,
            })}
          </React.Fragment>
        );
      }
    }
    复制代码

    用法

    render() {
        <LoadingArea>
            ({ loading }) => {
                loading
                    ? <Wating />
                    : <Main />
            }
        </LoadingArea>
    }
    复制代码

    同样的,最终执行时都是 JS,没有什么好奇怪的。

    React 16.* 新版本的 Conext.Consumer 就是采用了这种写法。

    render() {
        <ThemeContext.Provider value={this.state.theme}>
          ...
            <ThemeContext.Consumer>
              {({theme}) => (
                <button
                  style={{backgroundColor: theme.background}}>
                  Toggle Theme
                </button>
              )}
            </ThemeContext.Consumer>
          ...
        </ThemeContext.Provider>    
    }
    
    复制代码

    再以最近开发的例子,分享组件拆分的好处。

    需求:开发倒计时组件,运营配置倒计时结束时间,倒计时初始化时间从服务端获取,结束之前显示倒计时,倒计时结束之后做对应的操作,比如切换倒计时为其他组件。

    组件拆分:

    • 一个业务层容器组件,负责统筹,处理业务逻辑。(统筹规划,倒计时完要干什么,你直接跟我说)
    • 一个通用‘倒计时’的组件,向服务端轮询系统时间,计算当前剩余时间,FaCC 的形式提供给 children。(我数我的羊,你们爱干嘛干嘛)
    • 一个倒计时UI组件,对剩余时间格式化以及 UI 展示。(剩下多少,时间怎么来的,与我无关,给我什么我展示什么)

    伪代码:

    // CountDownContainer.js
    render() {
        const {
          endTime,
          renderSomethingAfterCountDown,
        } = this.props;
    
        return (
          <TimeLeftProvider endTime={endTime} >
            {seconds => (
              seconds > 0
                ? <CountDown {...this.props} remainingSeconds={seconds} />
                : renderSomethingAfterCountDown()
            )}
          </TimeLeftProvider>
        );
    }
    复制代码
    // TimeLeftProvider.js
    export default class TimeLeftProvider extends PureComponent {
      static propTypes = {
        children: PropTypes.func,
        endTime: PropTypes.number,
      }
    
      // ...
    
      componentDidMount() {
        this.poll();
      }
    
      poll() {
        queryServerTime();
        this.pollTimer = setInterval(() => {
          queryServerTime();
        }, pollInterval * 1000);
      }
    
      countDown() {
        setInterval(() => {
          this.setState(prevState => ({
            remainingSeconds: prevState.remainingSeconds - 1,
          }));
        }, 1000);
      }
    
      render() {
        const { remainingSeconds, reliable } = this.state;
        return this.props.children(remainingSeconds, reliable);
      }
    }
    复制代码
    // CountDown.js
    
    function CountDown(props) {
        const {
          remainingSeconds,
        } = props;
        const numbers = formatSeconds(remainingSeconds);
        const inputs = ['days', 'hours', 'minutes', 'seconds'];
    
        return (
          <div styleName={cls}>
            {
              inputs.map(key => ({
                label: key,
                number: numbers[key],
              })).map(
                 //...
              )
            }
          </div>
        );
    }
    复制代码

    最终得到的结果是:

    与此同时

    • 代码结构清晰,组件之间各司其职。
    • 组件可复用性强。
    • 单元测试简单,每个组件都只测试自身的逻辑。

    推荐阅读

    展开全文
  • Ext.form.TextField的 xtype类型 转载于:https://www.cnblogs.com/hpx2020/p/10784176.html

    Ext.form.TextField的 xtype类型

     

     

     

     

     

    转载于:https://www.cnblogs.com/hpx2020/p/10784176.html

    展开全文
  • 一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。 // 递归组件 recursive.vue <template> <div> <p>递归组件</p> <...

    一递归组件

        递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。
       

    // 递归组件 recursive.vue
    <template>
      <div>
        <p>递归组件</p>
        <Recursion :count="count + 1" v-if="count < 3"></Recursion>
      </div>
    </template>
    
    <script>
      export default {
        name: "Recursion",//必须设置name属性
        props: {
          count: {
            type: Number,
            default: 1
          }
        }
      }
    </script>

    这个例子中父页面使用该递归组件会调用三次recursive组件,值得注意的是递归组件必须设置递归次数限制数量
    否则会抛出错误,该例子中通过count来限制递归次数。

    二 动态组件

     如果将一个Vue组件命名为Component会报错,因为Vue提供来特殊的元素<component>来动态挂载不同组件。

      并使用is特性来选择要挂载的组件。

     

    // parentComponent.vue
    <template>
     <div>
        <h1>父组件</h1>
        <component :is="currentView"></component>
        <button @click = "changeToViewB">切换到B视图</button>
     </div>
    </template>
    
    <script>
      import ComponentA from '@/components/ComponentA'
      import ComponentB from '@/components/ComponentB'
      export default {
       components: {
          ComponentA,
          ComponentB
        },
       data() {
          return {
            currentView: ComponentA // 默认显示组件 A
          }
        },
        methods: {
          changeToViewB () {
            this.currentView = ComponentB // 切换到组件 B
          }
        }
      }
    </script>
    通过改变currentView的值就可以动态切换显示的组件,与之类似的是vue-router的实现原理,前端路由到不同的页面实际上就是加载不同的组件。

    转载于:https://www.cnblogs.com/myspecialzone/p/10405560.html

    展开全文
  • 组件类型 Vue.component(组建名称, 组件的配置) 在组件中使用components的配置项来表示 问题: 组件命名问题 组件命名和html原生标签冲突 Header Footer ----> header footer 大驼峰的写法 Vue.componennt...

    组件的类型

    1. Vue.component(组建名称, 组件的配置)
    2. 在组件中使用components的配置项来表示
    3. 问题:
      组件命名问题
    • 组件命名和html原生标签冲突 Header Footer ----> header footer
    • 大驼峰的写法
    Vue.componennt('ZhangJun',{
    template: '<div></div>'
    })
    
    <div id = "app">
    <!-- <ZhangJun></ZhangJun> 错的-->
    <zhang-jun></zhang-jun>
    </div>
    
    .box{
    background-color: red
    }
    
    box.style.backgroundColor = 'red'
    

    组件通信

    注意: 组件通信, 无论效果是如何的, Vue都是单向数据流(组件之间的数据通信)

    1. 父子组件通信
    • 绑定的是简单类型数据
    1. 父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性,
    2. 子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称
    3. 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
    4. 父组件中数据一旦修改, 子组件数据就会修改, 那么这也就是单项数据流
    5. 子父通信(效果上像, 间接的使用了父组件的东西 ) 【不推荐大家使用】

    eg:HTML部分

    <body>
    <div id="app">
    <Father></Father>
    </div>
    <template id="Father">
    <div class="father_box">
    <h3>骏仔</h3>
    <Son v-bind:money='money'></Son>
    <!-- <Son :money='money'></Son> -->
    </div>
    </template>
    <template id="Son">
    <div id="Son_box">
    <p>骏仔今天洗了:{{money}}次脚</p>
    </div>
    </template>
    </body>
    

    js部分

    <script>
    Vue.component('Father',{
    template: '#Father',
    data(){
    return {
    money:1000
    }
    }
    })
    Vue.component('Son',{
    template:'#Son',
    props:['money']
    })
    new Vue({
    el:'#app',
    })
    </script>
    
    • 绑定复杂数据类型 --------
    1. 父组件中的数据是一复杂数据类型, 那么父组件绑定数据的时候, 给子组件的是一个引用地址
    2. 子组件可以通过这个引用地址, 修改这个数据
    3. 效果上像, 子组件和父组件通信了, 违背单项数据流

    eg:HTML部分

    <body>
    <div id="app">
    <Father/>
    </div>
    <template id="father">
    <div id="father_box">
    <h3>Father</h3>
    <p>我现在有: {{sifangqian.money}}元</p>
    <son :sifangqian='sifangqian'> </son>
    </div>
    </template>
    <template id="son">
    <div id="son_box">
    <h3>Son</h3>
    <input type="text" v-model='sifangqian.money'>
    <p>我爸给了我:{{sifangqian.money}}元</p>
    </div>
    </template>
    </body>
    
    
    

    js部分

    
    <script>
    Vue.component('father',{
    template:'#father',
    data(){
    return {
    sifangqian: {
    money:1000
    }}
    }
    })
    Vue.component('son',{
    template:'#son',
    props:['sifangqian']
    })
    new Vue({
    el:'#app',
    })
    </script>
    
    
    
    • 父组件可以传递一个方法给子组件
    1. 父组件定义方法, 然后将这个方法通过单向数据绑定的形式传递给子组件
    2. 子组件通过props属性接收, 然后通过 @click = “方法名”

    eg:HTML

    <body>
    <div id="app">
    <king></king>
    </div>
    <template id="king">
    <div id="king_box">
    <h3>我是秦始皇 </h3>
    <p>支付宝到账:{{gk}}元!!!</p>
    <people @get="get"></people>
    </div>
    </template>
    <template id="people">
    <div id="people_box">
    <h3>我是农民</h3>
    <button @click="give">就算死也不打钱!</button>
    </div>
    </template>
    </body>
    
    
    

    js部分

    <script>
    Vue.component('King',{
    template:'#king',
    data(){
    return{
    gk:0
    }
    },
    methods:{
    get(value){
    this.gk +=value
    }
    }
    })
    Vue.component('People',{
    template:'#people',
    data(){
    return{
    money:2000
    }
    },
    methods:{
    give(){
    this.$emit('get',this.money/2)
    }
    }
    })
    new Vue({
    el:'#app',
    })
    </script>
    
    
    
    • 通过自定义事件来实现通信
    1. 父组件中定义 数据 和 方法(方法时用来操作数据的)
    2. 在子组件身上绑定自定义事件
    3. 子组件定义方法, 在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序
    <!-- html结构代码 -->
    <div id="app">
    <King></King>
    </div>
    <template id="king">
    <div>
    <h3> I am king </h3>
    <!-- <People v-on: get = "get"></People> -->
    <p> 国库中有:{{ gk }} 钱 </p>
    <People @get = "get"></People>
    </div>
    </template>
    <template id="people">
    <div>
    <h3> I am people </h3>
    <button @click = "give"> 交钱 </button>
    </div>
    </template>
    
    <!-- js代码 -->
    Vue.component('King',{
    template: '#king',
    data () {
    return {
    gk: 0
    }
    },
    methods: {
    get( value ){
    this.gk += value
    }
    }
    })
    Vue.component('people',{
    template: '#people',
    data () {
    return {
    money: 2000
    }
    },
    methods: {
    give () {
    this.$emit('get', this.money/2)
    }
    }
    })
    new Vue({
    el: '#app'
    })
    
    1. 非父子组件通信
    • 使用ref来绑定组件, (注意:ref也可以绑定DOM元素) 【ref链】
      1. 在父组件的模板中, 使用ref = refName 绑定在两个兄弟组件身上
      1. 在任意一个子组件中, 就可以通过 this.parent.parent.refs.refName 就可以获得另一个子组件了, 同时这个自组件身上的数据和方法同样也得到了
    
    <body>
    <div id="app">
    <Father></Father>
    </div>
    <template id="Father">
    <div>
    <h3> 我是父亲 </h3>
    <hr>
    <boy ref = "boy" ></boy>
    <hr>
    <girl ref = "girl" ></girl>
    <div ref = 'hello'>
    你好
    </div>
    </div>
    </template>
    <template id="boy">
    <div>
    <h3> I am boy </h3>
    <p> 我现在有:{{ cash }} 钱 </p>
    </div>
    </template>
    <template id="girl">
    <div>
    <h3> I am girl </h3>
    <button @click = 'give'> 给body 1000块 </button>
    </div>
    </template>
    </body>
    
    
    
    
    <script>
    Vue.component('Father',{
    template: '#father',
    data () {
    return {
    name: 'father'
    }
    }
    })
    Vue.component('boy',{
    template: '#boy',
    data () {
    return {
    cash: 2000
    }
    },
    methods: {
    incrementCash (value) {
    this.cash += value
    }
    }
    })
    Vue.component('girl',{
    template: '#girl',
    data () {
    return {
    money: 1000
    }
    },
    methods: {
    give(){
    console.log('====================================');
    console.log(this.$parent);
    console.log('====================================');
    // console.log( this.$parent.$refs ) // { body: Vuecomponent,girl: VueComponent }
    this.$parent.$refs.boy.incrementCash( this.money )
    // this.$parent.$children
    }
    }
    })
    new Vue({
    el: '#app'
    })
    </script>
    
    
    
    • 通过事件总线(bus)
      1. 它是通过事件的发布(声明), 以及事件的订阅(触发)来做的
      1. 首先在js中 创建一个bus对象(vm)
    var bus = new Vue()
    
      1. 在Count组件中定义数据, 和修改数据的方法
      1. 在Count组件中 通过 created 钩子 , 进行bus事件的发布
    created: {
    bus.$on('add',this.addCount)
    }
    
      1. 在MyButton组件的方法中通过 bus进行事件的订阅
    increment () {
    bus.$emit( 'add' )
    }
    
    1. 多组件状态共享
    • 使用 Vue-Router
    • 使用状态管理工具 Vuex

    eg:

    <body>
    <div id="app">
    <Mbutton></Mbutton>
    <count></count>
    </div>
    <template id="button">
    <div id="button_box">
    <button @click="increment">INCREMENT</button>
    </div>
    </template>
    <template id="count">
    <div id="count_box">
    <p>{{count}}</p>
    </div>
    </template>
    </body>
    

    js部分代码

    <script>
    var bus = new Vue()
    Vue.component('Mbutton',{
    template:'#button',
    methods:{
    increment(){
    bus.$emit('add')
    }
    }
    })
    Vue.component('count',{
    template: '#count',
    data(){
    return{
    count:0
    }
    },
    methods:{
    addCount(){
    this.count++
    }
    },
    created(){
    bus.$on('add',this.addCount)
    }
    })
    new Vue({
    el:'#app',
    })
    </script>
    
    
    ## 组件生命周期
    越狱
    24小时
    英版反击
    
    
    
    展开全文
  • Java获取数组组件类型及Array API简单示例
  • 一、组件类型SCA中有两种组件类型,即Component 组件类型(Component Type)和Composite组件类型(Composite Type),对应这两种组件类型,在模型对象中有两个组件类型的装载器:SystemComponentTypeLoader和...
  • 通过父级组件,通过Container类的getComponents()方法获得所有组件,然后通过获得名称进行名称判断,如果当前对象没找到,继续递归调用本方法,继续查找下级,查api发现只要Container类中有一个通过坐标查找components下级...
  • org.eclipse.debug.core.DebugException: 检索数组的组件类型时发生 com.sun.jdi.。 这个错误会在以下代码遇到的。   Course [] courses = new Course [2]; //Course是一个对,在这里我声明 //一个类的对象数组。 ...
  • 今天在删除一个字段的时候报如下截图错误,点开详细信息会看到是一个快速查找视图,但却在视图列中没有找到我要删的那个字段,然后回过头来又看到组件类型是查看,这是啥类型?有点摸不着头脑了。  最后想到...
  • Ext.ComponentQuery.query() ...返回值是所有符合条件的组件组成的数组。 用法跟JQuery的find()方法很相似。 var panel = Ext.create("app.view.page.entityreport.ReportSearchPlug.ReportSearchWindow
  • Java Swing组件类型

    2012-03-05 14:09:07
    所谓的顶层容器也可以说是所说的WIndow组件,它是可以独立显示的组件。中间容器:JPanel、JScrollPane、JSplitPane、JToolBar。所谓的中间容器也就是指那些可以充当载体,但也是不可独立显示的组件。通俗地说,就是...
  •  private void setIpComboValue()  {  ipCombo.removeAllItems();  HashMap hsMap = new HashMap();  String filePath = FileLaxOperation.getPathLax();  hsMap = ...
  • 手工增加了一种组件。但是在Joomla!新建菜单类型里看不见该类型。希望快速增加自定义组件类型的一个菜单项,方法很简单。在jos_menu表里增加一条该类型的记录,ok!搞定。再到菜单->新增的界面里就可以看到了。 
  • 组件图(构件图)

    2017-01-01 22:51:57
    一:定义 ...一般来说,组件就是一个实际文件,可以有以下几种类型:  >源代码组件:一个源代码文件或者与一个包对应的若干个源代码文件。  >二进制组件:一个目标码文件,一个静态的或者动态的库文件。
  • 本文是基本组件介绍的第一篇,主要介绍微信小程序给我们提供的小组件有哪些,并举一个简单的例子,第二篇将详细介绍各小组件的使用。基础组件框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行
  • 组件图显示组件以及它们之间的依赖关系,它可以用来显示程序代码如何分解成模块或组件。一般来说,组件就是一个实际文件 构成 源代码组件:一个源代码文件或者与一个包对应的若干个源代码文件。 二进制组件:一个...
  •  浏览器调试工具显示的正确的,调用父类方法功能能实现,但是出现了两次定义标签内容,两个按钮其中一个不能正常响应:是因为将传值跟绑定事件的两个作用...2.子组件调用的父组件的属性,只能读不能写。同时,子...
  • 微信小程序_基础组件微信小程序为小程序开发者提供了一系列小程序基础组件,开发者可以通过组合这些小程序基础组件进行微信小程序的快速开发。微信小程序组件是什么?微信小程序组件怎么用?小程序组件是视图层的...
  • 一、组件图(构件图) (一)定义 组件图(Component Diagram)又称为构件图庙会上软件组件以及组件之间的关系,组件本身是代码的物理模块,组件图则显示了代码的结构。...**组件类型 ①配置组件(Deploym...
  • 组件实例的命名规则

    2004-06-16 15:21:00
    6.6.2 组件实例的命名规则组件的名称应当具有描述性。...1. 组件的前缀组件的前缀多是表现组件类型的字母缩写。例如,下面表中的组件前缀。TButton btnTEdit edtTSpeedButton b t nTListBox lstbx如上所示,组
1 2 3 4 5 ... 20
收藏数 759,057
精华内容 303,622
关键字:

组件类型