202105笔记 -（有无状态组件、纯函数）

无状态组件

import React from 'react';
import PropTypes from 'prop-types';

const LearnCom = (props) => {
    return (
        <div>{props.desc}</div>
    )
}

LearnCom.propTypes  = {
    desc: PropTypes.string
}
export default LearnCom

理解：

 组件数据通过父级传入，组件不做数据处理

有状态组件

import React from 'react'
import PropTypes from 'prop-types';
class HelloWord extends React.Component {
    constructor(props){
        super(props);
    }

    render(){
        return (<div>
            { this.props.desc }
        </div>)
    }
}
HelloWord.protoTypes = {
    desc : PropTypes.string
}
export default HelloWord

理解

 组件各自拥有自己数据处理

纯函数

// 是 
const foo = (obj, b) => {
  return obj.x + b
}
// 不是
const foo = (obj, b) => {
    console.log(b)
}
// 不是
const foo = (obj, b) => {
	obj.x =2
  return obj.x + b
}

理解

 一个函数是纯函数条件：
 1. 有返回值
 2. 函数参数不能被修改