探索React（第二期）：props、列表渲染、条件渲染

总有人间一两风，填我十万八千梦~

什么是props

当React元素作为自定义组件，将JSX所接受的属性转换成单个对象传递给组件，这个对象就叫做“props”。说的简单点，props就是父组件传递给子组件的参数对象。
那么作为React规范的单向数据流，数据的流向只能通过props由外层到内层，所以当我们需要更新props的时候，需要通过父组件重新传入新的props来更新子组件，而不可在组件内部对props进行修改。当然了，React还提供了context这么个玩楞儿，来进行组件间的隔代通信~~

类组件和函数组件对于props传递的方式

function App() {
  return (
    <Fragment>
      <div className="container">
        {list.map((item, index) => {
          return <ListItem data={item} key={item.id} />;
        })}
      </div>
    </Fragment>
  );
}
//类组件
class ListItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="row mb-3">
        <div className="col-6 themed-grid-col">{this.props.data.name}</div>
      </div>
    );
  }
}

在类函数中constructor构造函数可以不写，不管有没有被显示的定义，constructor都会被默认添加。但是如果组件需要定义自己state的初始状态，就需要写在constructor函数里了，否则this.state就是null。而类组件还需要需要注意的是，如果你写了constructor，那么就必须执行super(...args)，此时组件才有自己的this。类组件中你还可以使用各种生命周期来执行一些操作。。。

// 函数组件
const listItemFuc = (props) => {
  return (
    <div className="row mb-3">
      <div className="col-6 themed-grid-col">{props.data.name}</div>
    </div>
  );
};

函数组件内部是没有this的，所以我们获取参数直接使用props即可，同时，与类组件还有一点不同的是不能调用诸如componentWillMount() 之类的生命周期，但是我们可以使用hooks中的useEffect() 来代替生命周期。

列表渲染

在vue中我们可以使用v-for 这样的指令来进行列表渲染，而React中可以使用js表达式的形式来达到相应的需求。
Arr.map(function(item){ return ... })

条件渲染方法

在这里我们介绍三种条件渲染的方法：
①使用三目运算符 （boolean ? case1 : case2）
②使用函数做条件判断
③使用与运算符 && 判断

// 三目运算符
<div>
    {props.data.count ? props.data.count : 5}
</div>
// 函数做条件判断
function renderList() {
  if (list.length === 0) {
    return <div>数据为空</div>;
  }
  return (
    <>
      {list.map((item, index) => {
        return <ListItem data={item} key={item.id} />;
      })}
    </>
  );
}
function App() {
  return (
    <Fragment>
      <div className="container">{renderList()}</div>
    </Fragment>
  );
}
// 与运算符判断
<div className="container">
    {list.length === 0 && <div>数据为空</div>}
    {list.map((item, index) => {
      return <ListItem data={item} key={item.id} />;
    })}
</div>