无状态组件

问题描述

晚上听小伙伴说，React的无状态组件，一时懵逼，之前没有听说过，知道的到关于react创建组件的方式仅有两种：

• ES5写法：React.createClass
• ES6写法：React.Component
• 今天来尝试的第三种： 无状态组件

矛盾点

为什么会出现无状态组件？既然无状态的组件没有生命周期，那么setState的功能如何实现？

问题解决

Q1:无状态的组件是什么？
A1:下面是官网上的一个例子

const Todo = (props) => (
 <li onClick={props.onClick}
 style={{textDecoration: props.complete ? "line-through" : "none"}} >
 {props.text} 
 </li> 
)

首先，它更新了我的认知，组件不再是class 了，它可以是一个function,主要负责用来展示，没有状态(state)的影响所以就是纯静态展示的作用。。。。看起来，确实是比定义一个es6要简洁

Q2:我们显示在页面上的数据一般都是通过父组件传递，this.props获取，无状态组件没有this,那么它是如何获取props的？
A2:因为它的本身是一个函数，所以可以通过参数来获取。看下面的伪代码：

//父组件
 <div>
  <AppComponent  data = {[]}   loadding = { true }  loadData = { 函数 }  />
 </div>

//子组件
const AppComponent = (props) =>{
     const { data, loadding, loadData } = props; // 通过es6的对象解构赋值的写法，直接从props获取到
     ……
     return <div>
      这是一个干净纯洁的stateless组件
     </div>
  }

Q3:官网上说无状态组件没有生命周期，好奇没有状态那么setState的方法改怎么办？
A3:看完demo ,哦，明白了。就是于我们常用的回调函数，自下而上的传值

# 父组件
  import ChildComponent from './ChildComponent'; // 引入子组件
  class AppComponent extends React.Component {
   state = {  msg:null,  content: null   // 初始状态 }

   changeLoad(content){  // 这个方法是传递给子组件调用的，并且子组件会传递content过来
     this.setState({
      msg: '反向传递成功',
      content           // { content } 等同于 { content: content }
     })
   }
   render(){
     return 
      <div>  <ChildComponent   msg = { msg }   changeLoad = { this.changeLoad }   // 调用子组件并传递msg以changeLoad方法
       />
      </div>
   }
 }

# 子组件
const ChildComponent =({ msg, changeLoad })=>{
  const str = "I love you";
  return <div>
   { msg?msg:null }  
   <button onClick = { changeLoad(str) }> 点我传递str给父组件 </button>  // 调用父组件的changeLoad方法并传递str给父组件
  </div>
}

也就是说：无状态组件想要实现的setstate的两个初识条件：

• 父组件不是stateless组件，它有生命周期。
• 必须依赖于父组件

反思

感觉自己像井底之娃，只知道自己用的那一小点，学习知识还是要全面的，避免盲人摸象。

action

多看看react的官网，React的版本升级后，有些地方使用可能已经变了，完成一些新特性的练习demo.