react之组件类型

BicycleWarrior 发布于2019-08-23 18:36 / 2148人阅读

摘要：一构造函数组件构造函数组件，可接受外部传入的参数，生成并返回一个元素伪。二关键字组件中组件的书写方式跟中类的书写方式非常接近，可以通过进行创建。如上图，监听的事件，实时更改的值并展示。

一、构造函数组件
构造函数组件，可接受外部传入的参数props，生成并返回一个React元素（伪DOM）。
例如，如下，Greeting作为一个组件，接受传入的参数name,并返回一个内容已填充的p标签。

function Greeting (props) {
   return (
       {props.name},how are you? 
   )
}

const element = 
ReactDOM.render(
  element,
  document.getElementById("root")
)

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

class HighGreeting extends React.Component {
   constructor(props){
     super(props);
     this.state={
       inputValue: this.props.name
     } 
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   render () {
     return (
        
        {this.state.inputValue},how are you?
     )
   }
   handleInputChange(e){
      let value = e.target.value;
      this.setState({
         inputValue: value
      })
   }
} 

const element = 
ReactDOM.render(
  element,
  document.getElementById("root")
)

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

class关键字组件内部可以定义state,相当于vue组件内的data,更改时需要调用this.setState,每次调用该方法时，都会执行render方法，自动更新组件。如上图，监听input的onchange事件，实时更改inputValue的值并展示。

需要注意的是，props不仅可以传递值，还可以传递函数。（这一点跟vue不一样，后面的文章会再细讲。）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105518.html

4、React组件之性能优化

摘要：组件的性能优化高德纳我们应该忘记忽略很小的性能优化，可以说的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外的代码。对多个组件的性能优化当一个组件被装载更新和卸载时，组件的一序列生命周期函数会被调用。 React组件的性能优化高德纳: 我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。...

陈伟 2019-08-22 15:01 评论0 收藏0
React 源码漂流（一）之起航

摘要：在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前版本号。注意包文件仅仅是的必要的功能性的定义，它必须要结合一起使用下是，原生环境下是。在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前 React 版本号 16.8.6。注意：react 包文件仅仅是 React components 的必要的、功能性的定义，它必须要结合 React...

Mr_zhang 2019-08-26 10:20 评论0 收藏0
React手稿之类型检查

摘要：类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用或者来实现。示例以上内容在实现一个通用组件时非常有用。类型检查和参数默认值一起使用，保证组件的正常运行。 Typechecking With PropTypes 类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用Flow或者TypeScript来实现。 React提供了PropTypes来检查类型。示例： imp...

tomorrowwu 2019-08-26 12:24 评论0 收藏0
可靠React组件设计的7个准则之封装

摘要：组件可以处理其他组件的实例化为了避免破坏封装，请注意通过传递的内容。因此，将状态管理的父组件实例传递给子组件会破坏封装。让我们改进两个组件的结构和属性，以便恢复封装。组件的可重用性和可测试性显著增加。翻译：刘小夕原文链接：https://dmitripavlutin.com/7-... 原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的Re...

yck 2019-08-26 10:40 评论0 收藏0
React 应用设计之道 - curry 化妙用

摘要：右侧展现对应产品。我们使用命名为的对象表示过滤条件信息，如下此数据需要在组件中进行维护。因为组件的子组件和都将依赖这项数据状态。化应用再回到之前的场景，我们设计化函数，进一步可以简化为对于的偏应用即上面提到的相信大家已经理解了这么做的好处。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 评论0 收藏0