无状态组件
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. 函数参数不能被修改