반응에서 상태와 소품의 차이점은 무엇입니까?

차이점: props는 구성 요소에 전달되는 반면(함수의 형식 매개 변수와 유사) 상태는 구성 요소 자체에 의해 구성 요소 내부에서 관리됩니다(함수 내에서 선언된 변수와 유사). 상태는 구성 요소의 자체 데이터 관리이며 자체 상태에 대한 제어입니다. 소품은 외부에서 전달된 데이터 매개 변수이며 변경할 수 없습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

관련 추천: "React Video Tutorial"

props

React의 핵심 아이디어는 컴포넌트화 아이디어이며, 페이지는 독립적이고 재사용 가능한 컴포넌트로 나누어집니다.

개념적으로 컴포넌트는 매개변수를 입력값으로 받을 수 있는 함수입니다. 이 매개변수는 props이므로 props는 에서 컴포넌트로 전달되는 것으로 이해될 수 있습니다. 외부. React는 단방향 데이터 흐름이므로 props는 기본적으로 상위 구성 요소에서 하위 구성 요소로 전달되는 데이터입니다. props，所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。

用法

假设我们现在需要实现一个列表，根据React组件化思想，我们可以把列表中的行当做一个组件，也就是有这样两个组件：<itemlist></itemlist>和<item></item>。

先看看<itemlist></itemlist>

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

列表的数据我们就暂时先假设是放在一个data变量中，然后通过map函数返回一个每一项都是<item item="'数据'/"></item>的数组，也就是说这里其实包含了data.length个<item></item>组件，数据通过在组件上自定义一个参数传递。当然，这里想传递几个自定义参数都可以。

在<item></item>中是这样的：

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

在render函数中可以看出，组件内部是使用this.props来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个item属性，所以通过this.props.item来获取即可。

只读性

props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

默认参数

在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型。比如，这样：

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

关于propTypes，可以声明为以下几种类型：

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

总结

props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。

state

state是什么呢？

State is similar to props, but it is private and fully controlled by the component.

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state

用法

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

首先，在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。

setState

state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式来修改，而需要通过this.setState()方法来修改state。

比如，我们经常会通过异步操作来获取数据，我们需要在didMount阶段来执行异步操作：

componentDidMount(){
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

当数据获取完成后，通过this.setState来修改数据状态。

当我们调用this.setState方法时，React会更新组件的数据状态state，并且重新调用render方法，也就是会对组件进行重新渲染。

注意：通过this.state=来初始化state，使用this.setState来修改state，constructor是唯一能够初始化的地方。

setState

🎜Usage🎜🎜🎜지금 목록을 구현해야 한다고 가정해 보겠습니다. React 구성 요소화 아이디어에 따르면 목록의 행을 구성 요소로 처리할 수 있습니다. 즉, 다음과 같은 두 가지 구성 요소가 있습니다. ItemList/> 및 <item></item>. 🎜🎜먼저 <itemlist></itemlist>의 데이터를 살펴보세요🎜

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

🎜당분간은 data 변수에 담겨 있다고 가정하고 전달하겠습니다. map 이 함수는 각 항목이 <item item="data"></item>인 배열을 반환합니다. 이는 실제로 data.length <item></item> 구성요소로, 구성요소의 매개변수를 사용자 정의하여 데이터가 전달됩니다. 물론 여기에서는 원하는 만큼 많은 맞춤 매개변수를 전달할 수 있습니다. 🎜🎜<item></item>에서는 다음과 같습니다: 🎜

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

🎜render 함수에서 볼 수 있듯이 구성요소는 this.props를 사용하면 이 구성 요소에 대한 모든 구성이 포함된 개체이므로 <code>item 속성만 전달하면 됩니다. props.item. 🎜🎜🎜읽기 전용🎜🎜🎜props는 구성 요소 및 초기화 상태를 렌더링하는 데 자주 사용됩니다. 구성 요소가 인스턴스화되면 해당 props는 읽기 전용입니다. 렌더링 프로세스 중에 props를 변경할 수 있는 경우 이 구성 요소의 표시 형식을 예측할 수 없게 됩니다. 새 props는 상위 구성 요소를 다시 렌더링해야만 구성 요소에 전달할 수 있습니다. 🎜🎜🎜기본 매개변수🎜🎜🎜구성요소에서 props의 매개변수에 대해 defaultProps를 설정하고 해당 유형을 지정하는 것이 좋습니다. 예를 들면 다음과 같습니다. 🎜rrreee🎜 propTypes의 경우 다음 유형으로 선언할 수 있습니다. 🎜rrreee🎜🎜Summary🎜🎜🎜props는 구성 요소에 전달되는 매개 변수입니다. 외부에서 주요 기능은 상위 구성 요소에서 하위 구성 요소로 데이터를 전송하는 것입니다. 이는 읽기 가능하고 변경할 수 없습니다. 하위 구성 요소는 외부를 통해 새 props를 적극적으로 전달해야만 다시 렌더링할 수 있습니다. 그렇지 않으면 하위 구성 요소의 props 및 프레젠테이션이 변경되지 않습니다. 🎜🎜🎜🎜state🎜🎜🎜🎜상태가 무엇인가요? 🎜rrreee🎜컴포넌트의 표시 형식은 데이터 상태와 외부 매개변수에 따라 결정될 수 있습니다. 외부 매개변수는 props이고, 데이터 상태는 state🎜🎜🎜Usage입니다. 🎜🎜rrreee 🎜먼저 컴포넌트가 초기화되면 this.state를 통해 컴포넌트의 초기 상태를 설정하고 처음 렌더링을 합니다. code> 이 데이터는 구성 요소를 렌더링하는 데 사용됩니다. 🎜🎜🎜setState🎜🎜🎜state는 state가 변경될 수 있다는 점에서 props와 다릅니다. 그러나 this.state=를 통해 직접 수정할 수는 없으며, 대신 this.setState() 메서드를 통해 state를 수정해야 합니다. 🎜🎜예를 들어, 비동기 작업을 통해 데이터를 얻는 경우가 많습니다. didMount 단계에서 비동기 작업을 수행해야 합니다. 🎜rrreee🎜데이터 획득이 완료된 후 this.setState를 전달하세요. code > 데이터 상태를 수정합니다. 🎜🎜 <code>this.setState 메서드를 호출하면 React는 구성 요소의 데이터 상태 state를 업데이트하고 render 메서드를 다시 호출합니다. 구성 요소를 다시 렌더링합니다. 🎜🎜🎜참고: this.state=를 사용하여 상태를 초기화하고 this.setState를 사용하여 상태를 수정합니다. 생성자는 초기화할 수 있는 유일한 장소입니다. 🎜🎜🎜setState는 객체나 함수를 첫 번째 매개변수로 허용합니다. 업데이트해야 하는 부분만 전달하면 됩니다. 다음과 같이 전체 객체를 전달할 필요는 없습니다.

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

在执行完setState之后的state应该是{name:'axuebin',age:18}。

setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

总结

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

区别

• props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
  

• state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；

• 没有state的叫做无状态组件，有state的叫做有状态组件；

• 多用props，少用state。也就是多写无状态组件。

更多编程相关知识，请访问：编程教学！！

위 내용은 반응에서 상태와 소품의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!