Question

一个人可以使用以下语法在React中创建一个组件：

import React, { Component } from 'react';
import ChildComponentOne from './ChildComponentOne';
import ChildComponentTwo from './ChildComponentTwo';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      propOne : '',
      propTwo : '',
      propThree : '',
    };

    this.doThis = this.doThis.bind(this);
    this.doThat = this.doThat.bind(this);
  }

  doThis() {
    ...doingThis code
  }

  doThat() {
    ...doingThat code
  }

  render() {
    return (
      <ChildComponentOne propOne={this.state.propOne} doThis={this.doThis}/>
      <ChildComponentTwo propTwo={this.state.propTwo} propThree={this.state.propThree} doThat={this.doThat}/>
    );
  }
}

export default App;

React是否使用此class语法，因为他们正试图为组织组件制作一个简洁的注释。构造函数方法之后的其他所有内容都以React为中心。

或者可以这样写：

App.prototype.doThis = function(){};
App.prototype.doThat = function(){};

function App(){
   this.state = {
      propOne : '',
      propTwo : '',
      propThree : '',
    };

   componentDidMount(){...somecode..}

   componentWillUnmount(){...somecode..}

  render(){
        return (
          <ChildComponentOne propOne={this.state.propOne} doThis={this.doThis}/>
          <ChildComponentTwo propTwo={this.state.propTwo} propThree={this.state.propThree} doThat={this.doThat}/>
        );
  }
}

我知道我相距不远，因为可以仅使用常规函数来创建所谓的functional component。

猜猜问题将是如何利用生命周期方法...

Answer 1

ES6类是函数类的语法糖。当将应用程序编译到ES5时，它们实际上成为函数。

React类组件应该具有render方法，并且典型地继承自React.Component，这就是它们与功能组件的不同之处。

render应该最好是原型方法：

App.prototype = Object.create(Component.prototype);
App.prototype.render = function () { ... };

function App(props) { ... }

因为this.render = ...实例方法不合理。也可能是某些第三方库的原型方法。

React组件中的不同区域

1 个答案: