useCallback 是从子组件到父组件获取道具数据的最佳方式吗？

Question

useCallback 是从子组件到父组件获取 props 数据的最佳方式吗？

Answer 1

从我的角度来看，这里有两个常见的选项：

向下传递回调函数（使用 useCallback 或其他方式创建）：

...
function Parent() {

    const [text, setText] = useState('');

    // Can also just pass setText directly
    function onClick() {
        setText('new text');
    }

    return (
        <Child onClick={onClick} />
    );

}

function Child(props) {
    return (
        <button onClick={props.onClick}>Click Me</button>
    );
}

优点：简单

使用上下文API并使用状态

如果子级嵌套很深，为了避免 prop drilling（并使状态容易被其他组件使用），您可以使用 ContextAPI:

TextProvider.js

...
const TextContext = createContext('');

export function TextProvider(children) {
    const [text, setText] = useState('');

    const value = {
        text, setText
    };

    return <TextContext.Provider value={text}>
        {children}
    </TextContext.Provider>;
};

export function useText() {
    const context = useContext(ClientContext);
    if (context === undefined) {
        throw new Error('useSocket must be used within a SocketProvider');
    }

    return context;
};

App.js（或呈现 <Parent /> 的任何文件）- 将 Parent 包装在提供程序中：

function App() {
    return (
    ...
    <TextProvider>
        <Parent />
    </TextProvider>
    ...
    );
}

Child.js

function Child(props) {
    const { text, setText } = useText();

    function onClick() {
        setText('hello'); // Will update "text" state on parent
    }

    return (
        <button onClick={onClick}>Click Me</button>
    );
}

优点：将 props 传递到深层嵌套的组件时很有用。 post 这里详细介绍了

的更多 pros/cons

useCallback 是从子组件到父组件获取道具数据的最佳方式吗？

Is useCallback best way to get props data from child component to parent components?

state

reactjs

react-props