2 cách khác nhau để tạo Phản ứng thành phần

Question

tôi đang theo một phản ứng hướng dẫn và đây là mã ví dụ tác giả đã đưa ra để tạo ra một Phản ứng thành phần cơ bản:

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

Ông khẳng định đó là ES6.

Nhưng sau đó tôi đã thấy một cách khác để tạo thành phần.

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

    } 
} 

hmm Tôi đang nhầm lẫn bây giờ. Có cách nào tiêu chuẩn để làm mọi thứ trong phản ứng không?

Answer 1

Trong React bạn có thể tạo ra cái gọi là thành phần chức năng trạng thái và trạng thái không trạng thái. Các thành phần không trạng thái là các thành phần có thể tái sử dụng đơn giản mà không cần phải duy trì trạng thái. Đây là một bản demo ngắn (http://codepen.io/PiotrBerebecki/pen/yaoOKv) cho bạn thấy cách bạn có thể tạo chúng và cách chúng có thể truy cập các đạo cụ được truyền từ phụ huynh (thành phần trạng thái).

Ví dụ đơn giản có thể là thành phần trạng thái App lý thuyết trên Facebook.com. Nó có thể duy trì trạng thái để theo dõi nếu người dùng đăng nhập hoặc đăng xuất. Sau đó, trong phương thức render(), nó sẽ hiển thị thành phần nút không trạng thái LoginLogout chuyển đến trạng thái hiện tại. Các LoginLogout thành phần không quốc tịch sau đó sẽ hiển thị một trong hai:.

• 'Đăng nhập' text nếu người dùng không đăng nhập, hoặc
• 'Log Out' text nếu người dùng đang đăng nhập

Bạn có thể tìm hiểu thêm về các thành phần stateful vs stateless đây: ReactJS difference between stateful and stateless và đây 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

Cả hai đều là "tiêu chuẩn bình đẳng". Mặc dù cú pháp cho trường hợp thứ hai bị tắt. Nó nên đọc class App extends React.Component {

Cách tiếp cận thứ hai là phương pháp chung nhất, vì nó cho phép trạng thái, chức năng bổ sung bên cạnh phương thức kết xuất thành phần và thành phần vv Nhưng khi bạn có các thành phần "chức năng" đạo cụ, bạn có cách tiếp cận đầu tiên như một cách viết tắt cho một lớp học chỉ với phương thức render. Khi gọi xong. React biết cách đối phó với hai trường hợp.

Answer 3

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

.210

được gọi là "thành phần chức năng không quốc tịch", mà không thể có tình trạng

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

một trong những khác là một phần bình thường.