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

Question

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'))

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

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

    }
}

嗯，我现在很困惑。在React中有什么标准的做事方式吗？

Answer 1

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

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

• “登录”文本（如果用户未登录），或
• “注销”文本（如果用户已登录）。

// 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')
);