JS每日一题: react中props和state的区别?

Posted 2021-04-26 JS每日一题

20190307期

react中props和state的区别

首先props和state都是用于描述component状态的

在React中，数据总是单向地自上往下流动，组件中的一些状态或者数据的管理有时让人很头疼，尤其是在设计一些组件的时候

State

如果component的某些状态需要被改变，并且会影响到component的render，那么这些状态就应该用state表示。 例如：一个购物车的component，会根据用户在购物车中添加的产品和产品数量，显示不同的价格，那么“总价”这个状态，就应该用state表示。

Props

如果component的某些状态由外部所决定，并且会影响到component的render，那么这些状态就应该用props表示。 例如：一个下拉菜单的component，有哪些菜单项，是由这个component的使用者和使用场景决定的，那么“菜单项”这个状态，就应该用props表示，并且由外部传入

下面我们列举一下两者的区别

应用场景	props	state
是否可以从父组件中获取初始值	可以	可以
是否能被父组件改变	可以	不可以
是否能设置默认值	可以	不可以
是否在组件里改变值	不可以	可以
能否给子组件设置初始值	可以	可以
能否在子组件里被改变值	可以	可以

了解了其基本概念后我们再来看一个典型的例子消化一下

 
   
   
 

  
    
    
  
 // 这段代码摘自脚手架react-redux-starter-kit
  
    
    
  
 // 我们可以看到store,history,children都是通过props传递的
  
    
    
  
 // 这样做的好处是在每一个子孙组件实例中都能直接通过this来进行访问
  
    
    
  
 // 当要传递的props过多时，我们也可以通过{...propsData}形式来进行解构传递
  
    
    
  
 render () {
  
    
    
  
 return (
  
    
    
  
 <Provider store={this.props.store}>
  
    
    
  
 <div style={{ height: '100%' }}>
  
    
    
  
 <Router history={browserHistory} children={this.props.routes} />
  
    
    
  
 </div>
  
    
    
  
 </Provider>
  
    
    
  
 )
  
    
    
  
 }
 
   
   
 

总结

• props用于定义外部接口，使用state来存储控制当前页面逻辑的数据

• props的赋值是在父级组件，state赋值在当前组件内部

• props是不可变的，而state是可变的

最近答题

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

关注「JS每日一题」，参与答题！