close

React 基本概念- Components, Props, State

1. Components

Components 是 React 可以重复使用的独立构建块。 它们被分为较小的 UI 元素，并且可以组合形成更大的 UI 元素 components。 例如，应用程序可以具有 、 和 components 等 。 每个组件都有自己的职责，可以接收 和 显示相应的数据。 Header Sidebar Content props state

例子： 

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

 

2. Props

Props in是 从外部 React 传入的值。 components 它们有助于将数据从父级传递 components 给子级 components。 Props 是只读的，不能在组件内部更改。 要使用 props，我们将值传递给组件的属性并在 UI 部分中使用它们。

例子： 

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

 

3. State

State in React 是可以在组件内更改的可变数据。 每个组件都可以有自己的 state 来存储和管理动态数据。 当 state 发生变化时， React 自动更新相应的用户界面。 State 仅在类中管理 components，并在组件的构造函数中初始化。 为了更新 state，我们使用 `set State()` 方法。

例子： 

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}