export default function Example() {
    // useState() 方法里面唯一的参数就是初始 state，可以是数字或字符串或对象
    // 这一步设置了count的初始值为0
    // setCount为修改count这个状态的方法
    // 调用一次setCount，React会重新渲染 Example 组件
    const [count, setCount] = useState(0)

    return (
        <div>
            you count: {count}
            {/* 每次点击按钮调用setCount，会让count + 1 */}
            <button onClick={() => setCount(count + 1)}>Add</button>
        </div>
    )
}

// 自定义的Hook需要以大写字母开头
// 这里的Hook只控制count + 1，因此可以复用
// 我们只需多次使用，就如下面的count1和count2，他们是互相独立的
function UseState(initvalValue) {
    const [count, setCount] = useState(initvalValue)
    return [
        count,
        () => {
            setCount(count + 1)
        }
    ]
}

export default function Example() {
    const [count1, addCount1] = UseState(0)
    const [count2, addCount2] = UseState(0)

    return (
        <div>
            you count1: {count1}
            {/* 每次点击按钮调用setCount，会让count + 1 */}
            <button onClick={addCount1}>Add1</button>
            you count2: {count2}
            {/* 每次点击按钮调用setCount，会让count + 1 */}
            <button onClick={addCount2}>Add2</button>
        </div>
    )
}

export default () => {
    const [count, setCount] = useState(0);

    // 在渲染后将执行该操作，并且在执行DOM更新之后也会调用它
    // effect可以返回一个清除函数，如此可以清除上一步的操作
    // 可以接受两个参数，第一个就是操作本身，第二个是更新的依赖
    // 可以选择不传，不传将依赖所有state变化
    // 如果传入空，或者传一个确定的数如[1],那么该函数只会执行一次，即第一次渲染
    // 可以传[count],则表示资源count变化才会调用
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    // 当然可以定义多个effect函数，它们会各自执行
    const [person, setPerson] = useState(1);

    useEffect(() => {
        //
    }, [person]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
        </button>
        </div>
    );
}

// 这里实现一个count自动 +1 的函数
// 自定义的Hook需要以大写字母开头
// 可以不传useEffect的第二个参数,这和传入callback, time一样
// 如果第二个传入为空将会出现神奇的事情：
// 会发现console会一直打印0，但是count却一直都是1
// 这是因为未传依赖导致每次更新都在运行第一个延时函数，如果需要变化count可以有两种方法
// 第一种是，传第二个参数为[callback, time]或者不传第二个参数
// 第二种是，将Example里的setCount(count + 1)改为setCount(count => count + 1)
// 这种方法将会改变作用域，每次都会取最新的count，大多数情况下都推荐以函数的形式
function UserInterval(callback, time) {
    useEffect(() => {
        const i = setInterval(callback, time)
        return () => {
            clearInterval(i)
        }
    }, [callback, time])
}

export default function Example() {
    const [count, setCount] = useState(0)
    // 第一种：传第二个参数为[callback, time]或者不传第二个参数
    UserInterval(() => {
        console.log(count)
        setCount(count => count + 1)
    }, 1000)
    // 第二种：将Example里的setCount(count + 1)改为setCount(count => count + 1)
    // UserInterval(() => {
    //     console.log(count)
    //     setCount(count => count + 1)
    // }, 1000)
    return (
        <div>
            you count: {count}
        </div>
    )
}

// 以白黑切换来讲解
// 这里创建一个白黑模式样式
const themes = {
    light: {
        background: '#fff'
    },
    dark: {
        background: '#000'
    }
}

// 创建一个context对象，包含白黑切换方法以及当前颜色
const ThemeContext = React.createContext({
    theme: themes.light,
    toggle: () => { }
})

export default function Example() {
    const [theme, setTheme] = useState(themes.light)
    // 需要读取 context 的值以及订阅 context 的变化
    // 仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。
    // MyContext为自定义的，本文为ThemeContext
    return <ThemeContext.Provider value={{
        theme,
        toggle: () => { setTheme(theme === themes.light ? themes.dark : themes.light) }
    }}>
        <Toolbar />
    </ThemeContext.Provider>
}

const Toolbar = () => {
    return <ThemeBitton />
}

// 如果需要拿到Example组件里的theme，我们需要传递三层，十分麻烦
// 因此可以使用useContext来连接ThemeContext，直接操作theme
const ThemeBitton = () => {
    // useContext接收一个 context 对象（React.createContext 的返回值）
    // 并返回该 context 的当前值
    const context = useContext(ThemeContext)
    return <button style={{
        background: context.theme.background
    }} onClick={context.toggle}>Click Me</button>
}