react之如何写一个管理自有状态的自定义组件

时间: 2019-06-09阅读: 33标签: 组件

一、函数组件

函数组件类似一个纯函数,接受外部传入的参数,生成并返回一个React元素(伪DOM)。
例如,如下,Greeting作为一个组件,接受传入的参数name,并返回一个内容已填充的p标签。

function Greeting (props) {
   return (
      <p> {props.name},how are you? </p>
   )
}

const element = <Greeting name="Agnes" />
ReactDOM.render(
  element,
  document.getElementById('root')
)


二、class组件

react中class组件的书写方式跟es6中类的书写方式非常接近,可以通过React.Compnent进行创建。与函数组件不同的是,该组件可以进行复杂逻辑的处理,既可以接受外部参数,也可以拥有自己的state,用于组件内的通信。

class HighGreeting extends React.Component {
   constructor(props){
     super(props);
     this.state={
       inputValue: this.props.name
     } 
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   render () {
     return (
        <input type="text" onChange="handleInputChange"/>
        <p>{this.state.inputValue},how are you?</p>
     )
   }
   handleInputChange(e){
      let value = e.target.value;
      this.setState({
         inputValue: value
      })
   }
} 

const element = <HighGreeting name="Agnes" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

上面的组件,接收props参数作为初始值,当用户输入时,会实时更新。

  1. 每次定义子类的构造函数时,都需要调用super方法,因此所有含有构造函数的React组件中,构造函数必须以super开头。调用super相当于初始化this.props。
  2. class组件内部可以定义state,相当于vue组件内的data,更改时需要调用this.setState,每次调用该方法时,都会执行render方法,自动更新组件。如上图,监听input的onchange事件,实时更改inputValue的值并展示。
  3. 需要注意的是,props不仅可以传递值,还可以传递函数,甚至传递另一个组件。


小程序自定义actionSheet组件

在微信小程序中,针对操作菜单的需求,官方文档提供了相应的api,如下图所示。但是小程序自带的操作菜单没有 “标题” 这么一个参数,不能在操作菜单的顶部显示自定义的标题

记录一次优雅的管理Vue全局组件自动注册和插件自动引入

随着项目的不断变大,可能有些人会把插件的引入和全局组件的注册都放到main.js中,导致后面main.js里面一大坨引入代码,看起来杂乱无比,也不利于后期进行维护,所以我们尽可能的让main.js看起来整洁些

使用vue.js的动态组件模板

组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。在 Scrumpy 中组件用于提醒、评论和附件等多个地方。

编写 Vue.js 组件前需要知道的 10 件事

本文介绍了编写 Vue.js 组件前需要知道的 10 件事,其中包括:组件可以全局或局部加载;延迟加载 / 异步组件;必需的 Props;使用 $emit 触发自定义事件;多 Props 绑定和覆盖等等。

前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二者之间在很多基础概念、设计思路上是相通的

vue中keep-alive组件的使用

在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态;vue里提供了keep-alive组件用来缓存状态。

Vue使用Props绑定Object并且传参

通过Props 给子组件传变量,变量是对象时,子组件无法在首次打开时获取到传入对象数据,并且在父组件中改变对象的属性,子组件也是无法监听

Flutter自定义状态管理组件

Flutter 新建组件有俩种状态组件: StatelessWidget 和 StatefulWidget ,这些在新建 Flutter 项目就能看到相关展示代码,下面就详细解释下这俩者区别:

最简单的vue消息提示全局组件

实现功能:自定义文本:自定义类型(默认,消息,成功,警告,危险);自定义过渡时间;使用vue-cli3.0生成项目,toast全局组件编写

vue重新渲染组件(重置或者更新)

当数据通过异步操作后,对之前加载的数据进行变更后,发现数据不生效。A组件或者B组件触发数据更新,C组件数据更新了,但是C组件仍显示上一次数据。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全