反应JS |状态与道具

我们知道，React 组件是可以在构建 UI 时一次又一次地重用的构建块。在跳入 state 和 props 之间的主要区别之前，让我们看看 react 中的组件如何与 javascript 中的普通函数相关联
例子：

javascript

// simple component
class FakeComponent extends React.component{
 render(){
    return Hello World!
    }
}
// simple javascript function
const FakeFunction = () => console.log('Hello World!');

javascript

// component
class FakeComponent extends React.component{
  state = {
      name : 'Mukul';
   }
  render(){
      return Hello {this.state.name}
   }
}
// simple js function
const FakeFunction = () => {
  let name = 'Mukul';
  console.log(`Hey ${name}`);
}

javascript

// component
class FakeComponent extends React.component{
 render(){
    return Hello {this.props.name}
    }
}
// passing the props

在上面的代码中，我们通过扩展React.component原生方法声明了一个简单的 React 组件，然后我们简单地将其中包含“Hello World”的 div 渲染为文本。在函数之后，我们有一个简单的javascript函数，其中包含一个简单的console.log，它在里面做同样的事情，打印'Hello World！'。
所以现在我们知道 React 组件的工作方式类似于普通的 javascript函数。我们来看看状态

状态

状态是存在于组件内部的变量，不能在组件外部访问和修改，只能在组件内部使用。与在普通 javascript.State 中无法在函数范围之外访问的函数内声明的变量非常相似。可以使用 this.setState 进行修改。状态可以是异步的。每当 this.setState 用于改变状态时，类都会重新渲染自己。让我们在帮助下看一个例子：
例子：

javascript

// component
class FakeComponent extends React.component{
  state = {
      name : 'Mukul';
   }
  render(){
      return Hello {this.state.name}
   }
}
// simple js function
const FakeFunction = () => {
  let name = 'Mukul';
  console.log(`Hey ${name}`);
}

在上面的代码中，我们只是在组件中声明了一个 name 属性并在渲染时使用它，类似于 javascript 中的普通函数的情况。还应注意，状态本质上是可变的，不应从子组件访问。

道具

我们知道 React 中的组件会在 UI 中一次又一次地使用，但我们通常不会使用相同的数据渲染相同的组件。有时我们需要更改组件内部的内容。在这些情况下，道具开始发挥作用，因为它们被传递给组件和用户。让我们看看它们是如何工作的：
例子：

javascript

// component
class FakeComponent extends React.component{
 render(){
    return Hello {this.props.name}
    }
}
// passing the props

一个简单的组件，然后我们将 props 作为属性传递，然后使用this.props在组件内部访问它们。所以 props 通过赋予组件以 props 的形式从父组件接收数据的能力，使组件可重用。它们是不可变的。