Question

我正在关注反应教程，这是作者为创建基本React组件而提供的示例代码：

const React = require('react')
const ReactDOM = require('react-dom')

const App = () => {
    return (
        <div className='app-container'>
            <h1>Hello</h1>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('app'))

他声称是ES6。

但后来我看到了创建组件的另一种方法。

class App extends React.Component {
    render(){
        return <h1>Hello</h1>;

    }
}

嗯，我现在很困惑。有没有标准的做法做出反应？

Answer 1

在React中，您可以创建所谓的有状态和无状态功能组件。无状态组件是简单的可重用组件，不需要维护状态。这是一个简短的演示（http://codepen.io/PiotrBerebecki/pen/yaoOKv），向您展示如何创建它们以及它们如何访问从父（有状态组件）传递的道具。

一个简单的例子可能是Facebook.com上的理论App有状态组件。如果用户登录或注销，它可以维护状态以跟踪。然后在其render()方法中，它将显示一个LoginLogout无状态按钮组件，将当前状态传递给它。然后，LoginLogout无状态组件将显示：

＆＃39;登录＆＃39;如果用户未登录，则为文本，或
＆＃39;退出＆＃39;如果用户已登录，则为文本。

您可以在此处详细了解有状态与无状态组件：ReactJS difference between stateful and stateless和此处React.createClass vs. ES6 arrow function

// Stateful component
class FacelookApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  receiveClick() {
    this.setState({
      isLoggedIn: !this.state.isLoggedIn
    });
  }

  render() {
    return (
      <div>
        <h4>Welcome, I'm a stateful parent called Facelook App</h4>
        <p>I maintain state to monitor if my awesome user logged 
          in. Are you logged in?<br />
          <b>{String(this.state.isLoggedIn)}</b>
        </p><br />

        <p>Hi, we are three stateless (dumb) LoginLogout buttons 
          generated using different ES6 syntax but having the same
          functionality. We don't maintain state. We will tell 
          our parent if the user clicks on us. What we render is 
          decided by the value of the prop sent to us by our parent.
        </p>

        <LoginLogout1 handleClick={this.receiveClick.bind(this)} 
                isLoggedIn={this.state.isLoggedIn}/>

        <LoginLogout2 handleClick={this.receiveClick.bind(this)} 
                isLoggedIn={this.state.isLoggedIn}/>

        <LoginLogout3 handleClick={this.receiveClick.bind(this)} 
                isLoggedIn={this.state.isLoggedIn}/>
      </div>
    );
  }
}


// Stateless functional components
// created in 3 equally valid ways
const LoginLogout1 = (props) => {
  return (
    <div>
      <button onClick={() => props.handleClick()}>
        LoginLogout v1 --- {props.isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
  );
};

// or
const LoginLogout2 = ({handleClick, isLoggedIn}) => (
    <div>
      <button onClick={() => handleClick()}>
        LoginLogout v2 --- {isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
);

// or
const LoginLogout3 = ({handleClick, isLoggedIn}) => {
  return (
    <div>
      <button onClick={() => handleClick()}>
        LoginLogout v3 --- {isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
  );
};



ReactDOM.render(
  <FacelookApp />,
  document.getElementById('app')
);

Answer 2

它们都是“同等标准”。虽然第二种情况的语法是关闭的。它应该是class App extends React.Component {

第二种方法是最通用的方法，因为除了渲染和组件生命周期方法之外它还允许状态，额外的功能等。但是当你有“功能”组件，它只是根据他们的道具显示某些东西时，你就拥有了第一种方法是仅使用render方法的类的简写。在调用.render时，React知道如何处理这两种情况。

Answer 3

const App = () => {
  return (
    <div className='app-container'>
      <h1>Hello</h1>
    </div>
  )
}

被称为“无状态功能组件”，它不能具有状态

https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

另一个是正常组件。

2种不同的方法来创建React组件

3 个答案: