React前端面试题(持续更新...) 1

const [state, setState] = useState(initialValue);
// state：初始的状态属性，指向状态当前值，类似this.state
// setState：修改状态属性值的函数，用来更新状态，类似setState
// initialValue：状态的初始值，该值会赋给state

const Count = () => {
    const [count, setCount] = useState(0); // 将0设置为count的初始值
    const addCount = () => {
        let newCount = count;
        setCount(newCount += 1);
    }
    return (
        <div>
            <p>{count}</p>
            <button onClick={addCount}>加1</button>
        </div>
    )
}

useEffect(() => {
    // 回调函数，其中是要进行的异步操作代码
}, [array])
// [array]：useEffect执行的依赖，当该数组的值发生改变时，回调函数中的代码就会被指向
// 如果[array]省略，则表示不依赖，在每次渲染时回调函数都会执行
// 如果[array]是空数组，即useEffect第二项为[]，表示只执行一次

const AsyncPage = () => {
    // 首先设置loading状态为true
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        // 2秒后将loading状态设置为false
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    })
    return (
        // 判断loading是否为true，是就显示loading，不是就显示异步请求完成
        loading ? <p>loading...</p> : <p>异步请求完成</p>
    )
}

const AsyncPage = ({name}) => {
    const [loading, setLoading] = useState(true); // 设置loading状态为true
    const [person, setPerson] = useState({}); // 设置person状态为空对象
    useEffect(() => {
        // 首先设置loading为true，2秒后改为false，name改成传过来的参数
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            setPerson({name});
        }, 2000);
    }, [name]); // 表示当name修改才会执行回调函数
    return (
        <>
            {loading ? <p>Loading...</p> : <p>{person.name}</p>}
        </>
    )
}
const PersonPage = () => {
    // 设置初始state为空字符串
    const [state, setState] = useState("");
    const changeName = (name) => { // 修改name的函数
        setState(name);
    }
    return (
        <>
            {/*首先将state传给name*/}
            <AsyncPage name={state}/>
            <button onClick={() => { // 点击按钮后将张三传给name
                changeName("张三")
            }}>张三
            </button>
            <button onClick={() => {
                changeName("李四")
            }}>李四
            </button>
        </>
    )
}

useCallback(() => {
    // 回调函数，当array改变后，该函数才会重新声明
}, [array])
// 如果[array]为空数组，那么就是第一次创建后就被缓存，如果后期array改变了，拿到的还是老的array
// 如果不传入第二个参数，每次都会重新声明一次，拿到的就是最新的array

        const UseCallback = function () {
            const handleChange1 = () => {
                // 具体代码
            }
            const handleChange2 = () => {
                // 具体代码
            }
            const handleChange3 = () => {
                // 具体代码
            }
            const handleChange4 = () => {
                // 具体代码
            }
            return (
                <div>
                    {/*具体代码*/}
                </div>
            )
        }

        const UseCallback = function () {
            const handleChange1 = useCallback(
                () => {
                    // 具体代码
                }, [依赖项]
            )
            const handleChange2 = useCallback(
                () => {
                    // 具体代码
                }, [依赖项]
            )
            const handleChange3 = useCallback(
                () => {
                    // 具体代码
                }, [依赖项]
            )
            const handleChange4 = useCallback(
                () => {
                    // 具体代码
                }, [依赖项]
            )
            return (
                <div>
                    {/*具体代码*/}
                </div>
            )
        }

useMemo(() => fn, [])
// useCallback(fn, []) = useMemo(() => fn, [])

const loginRef = useRef();

<input ref={loginRef}/>

// 第一步：创建全局的Context
const AppContext = React.createContext([初始化参数])
// 第二步：通过全局的Context进行状态值的共享
<AppContext.Provider value={{ 属性名: 值 }}>
    <组件1 />
    <组件2 />
</AppContext>

const Count = () => {
    const AppContext = React.createContext({});
    const A = () => {
        const {name} = useContext(AppContext);
        return (
            <div>
                我是A组件，我的名字是：{name}
            </div>
        )
    }
    const B = () => {
        const {name} = useContext(AppContext);
        return (
            <div>
                我是B组件，我的名字是：{name}
            </div>
        )
    }
    return (
        <AppContext.Provider value={{name: "橘猫吃不胖"}}>
            <A/>
            <B/>
        </AppContext.Provider>
    )
}

const [state, dispatch] = useReducer(reducer, initialState)

const Count = () => {
    const reducer = (state, action) => {
        if (action.type == "add") {
            return {
                ...state,
                count: state.count + 1
            }
        } else {
            return state
        }
    }
    const addCount = () => {
        dispatch({
            type: "add"
        })
    }
    const [state, dispatch] = useReducer(reducer, {count: 0});
    return (
        <>
            <p>{state.count}</p>
            <button onClick={addCount}>加1</button>
        </>
    )
}