import React, { Component, useState, memo, useEffect, useMemo, useCallback } from 'react'
import { View } from '@tarojs/components'
import { AtInput } from 'taro-ui'
import { produce } from 'immer'

import './index.scss'



const Caaaa = memo( (props) => {
    console.log('render...');
    
    return <AtInput name='text' value={props.val} onChange={props.onChange} />;
} );
  
const App = () => {
    const [val1, setVal1] = useState('1');
    const [val2, setVal2] = useState('2');
  
    const onChange1 = useCallback( evt => {
        console.log('onChange1');
        
        // console.log(evt, 'evt');
        
    //   setVal1(evt.target.value);
    }, []);
  
    const onChange2 = useCallback( evt => {
        console.log(evt);
    //   setVal2(evt.target.value);
    }, []);
  
    return (
        <View>
            <Caaaa val={val1} onChange={onChange1} ></Caaaa>
            <Caaaa val={val2} onChange={onChange2} ></Caaaa>
        </View>
    );
  }


const Card = memo(({name}) => {
  
    console.log('Card函数执行');
    
    const stopMulRender = HTMLElement => {
        console.log('stopMulRender函数执行');
        
        return HTMLElement
    }

    // const memoValue = useMemo(() => stopMulRender(name), [name])

    const callbackValue = useCallback( () => {
        console.log('我执行了么');
        
        stopMulRender(name)
    }, [name])

    console.log(callbackValue, 'memoValue');
    
    const log  = () => {
        console.log('log被打印');
        
    }
    return (
        <View className='card'>
            {log()}
            {name}
        </View>
    )
})

// const App = () => {
//     const [name, setName] = useState('名称')
//     const [content,setContent] = useState('内容')
//     return (
//         <View>
//           <View onClick={() => setName(new Date().getTime())}>name</View>
//           <View onClick={() => setContent(new Date().getTime())}>content</View>
//           {/* {content} */} 
//           <Card name={name}></Card>
//         </View>
//     )
//   }


class Home extends Component {




   constructor (props) {
        super(props)
        this.state = {
            count: 1,
            like: true
        }
   }

   componentDidMount () {
        this.setState((state) => {
            return {
                count: state.count + 3
            }
        })
        this.setState((state) => {
            return {
                count: state.count + 10
            }
        },  () => {
            console.log(this.state);
        })
   }

    Hello () { 
        return <View>Hello2222</View>
    }


    handleCount = () => {
        this.setState({
            count: 10000
        }, () => {
            console.log(this.state.count);
            
        })
    }
    

    render () {

        
        return (
            <View>
                <View onClick={this.handleCount}>click me</View>
                <Card like={this.state.like}>
                    {/* <View>hello</View>
                    <View>ccc</View> */}
                </Card>
            </View>
        )
    }
}

export default App