import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './Welcome.less';
// 父组件
export default (): React.ReactNode => {
const intl = useIntl();
const [n, setN] = useState(0);
const [m, setM] = useState([{ a: 1, b: 2 }]);

const add = () => {
setN(i => i + 1);
};
const addChild = () => {
setM([{ a: 2, b: 2 }]);
};
// onClickChild没传给子组件时子组件只更新传的props值更新子组件，当加了这个函数后memo无作用依旧没有优化性能的作用
// 当点击n时，就会重新执行App代码还是影响子组件重复渲染，
// onClickChild空函数的地址会发生改变，
// 所以说此时还是会执行Child的

// const onClickChild=()=>{ };

// usememo解决因函数更新而渲染自己的问题，就可以使用useMemo,使用它将函数重新封装
//第一个参数是函数，第二个参数是依赖，只有依赖变化时才会重新计算函数
////使用useMemo重新写监听函数，当m变化时才会执行此代码
const onClickChild = React.useMemo(() => {
return () => {
console.log(m)
}
}, [m])
//等价于
// const onClickChild=useCallback(()=>{
// console.log(m)
// },[m])


return (
<PageContainer>
<div>
<div>
n:{n}
<button onClick={add}>n+1</button>
<button onClick={addChild}>m+1</button>
</div>
//应用子组件
{/* <Child data={m} /> */}

<Child2 data={m} onClick={onClickChild} />
<Home></Home>
</div>


</PageContainer>
);
};

const Child = (props: any) => {
console.log('child执行了')
return (
<div>
child;
</div>
)
}

const Child2 = React.memo(Child)
const Child2demo = React.memo(Child,(pre,curr)=>{
console.log(pre,curr); 
// 打印的curr{
// data: [ {a: 1, b: 2}]
// data-inspector-column: "6"
// data-inspector-line: "95"
// data-inspector-relative-path: "src/pages/Welcome.tsx"
// onClick: ƒ ()
// }
return curr.data[0].a===2 //为true不重新渲染，为false就重新渲染子组件，意思当点击m变成2就不渲染了

})


class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
isMobile: "isMobile",
show: 123, // 如果不是 dva 2.0 请删除
};
this.adds = this.adds.bind(this);
}

componentDidMount() {
this.setState({ isMobile: 'eeee' });
}

adds() {
this.setState({ show: 7777 });

};
render() {
console.log('fuqin');

return (
<div

>
dddddddddddd
<button onClick={this.adds}>n+1</button>
<Homecomponent></Homecomponent>
</div>
);
}
}

class Homecomponent extends React.Component {

constructor(props) {
super(props);
this.state = {
isMobile: "isMobile",
show: 123, // 如果不是 dva 2.0 请删除
};
}

componentDidMount() {
this.setState({ isMobile: 'isMobile' });

}

render() {
console.log(2222);
return (
<div
>
ffffffff
</div>
);
}
}z