console 命令行工具 X clear

console

// React Context
const DEFAULTTHEMESTYLE = {
    display: "inline-block",
    color: "green",
    backgroundColor: "#d7d7d7",
    padding: "20px"
};
const UserSelectedStyle = React.createContext(null);

// 自定义钩子获取用户信息
function useGetUserData(visible) {
    // state
    const [userData, setUserData] = React.useState({});
    const [loading, setLoading] = React.useState(false);

    // 钩子
    React.useEffect(() => {
        if (!visible) return;
        // 发送请求
        setLoading(true);
        fetch("https://randomuser.me/api/")
            .then(res => res.json())
            .then(response => {
                setUserData(response.results[0]);
                setLoading(false);
            })
            .catch(err => setLoading(false));
    }, [visible])

    // 返回state
    return { userData, loading };
}

// 渲染用户信息
function RenderUserInfo(props) {

    // 使用自定义钩子
    const { userData, loading } = useGetUserData(props.visible);

    if (!props.visible) return null;
    // 渲染组件
    return (
        <div className="modal">
            {
                loading ? (<span>loading .....</span>) : (
                    <ul>
                        <li>Name: {`${(userData.name || {}).first} ${(userData.name || {}).last}`}</li>
                        <li>Gender: {userData.gender}</li>
                        <li>Phone: {userData.phone}</li>
                    </ul>
                )
            }
        </div>
    )
}

// 入口组件
function Example() {
    // state 
    const [visible, setVisible] = React.useState(false);

    // toggle modal function
    function handleToggleModal() {
        setVisible(!visible);
    };

    return (
        <UserSelectedStyle.Consumer>
            {value => (
                <div className="wrap">
                    <h3>Home</h3>
                    <span style={value}>visible: {visible ? 'true' : 'false'}</span><br />
                    <button type="button" onClick={handleToggleModal}>toggle modal</button>
                    <RenderUserInfo visible={visible} />
                </div>
            )}
        </UserSelectedStyle.Consumer>
    )
}


ReactDOM.render(
    <UserSelectedStyle.Provider value={DEFAULTTHEMESTYLE}>
        <Example />
    </UserSelectedStyle.Provider >,
    document.querySelector("#root")
)

<!doctype html>
<html>

<head>
	<title>React Hooks Demo</title>
</head>

<body>
	<div id="root"></div>
</body>

</html>

SOURCE

本项目引用的自定义外部资源