在React中，將所有道具從父項傳遞給子項目是否是一種很好的做法？

Question

說我有一個父組件和一個子組件。

props有十個鍵，但孩子只需要三個。

將道具傳遞給子組件的更好方法是什麼？

class Parent extends Component { 
    render() { 
    { /*pass all the ten keys into child*/ } 
    <Child {...this.props} /> 
    } 
} 

或

class Parent extends Component { 
    render() { 
    { /*pass only the needed keys into child*/ } 
    <Child key1={key1} key2={key2} key3={key3}/> 
    } 
} 

Answer 1

一般通過所有的道具是不是一個好主意。更多的道具意味着更多的東西會導致子組件不必要地重新渲染。但是，可以方便在這些道具的一個子集上使用展開運算符。例如，一個父組件可能會收到很多道具，但是並沒有使用其中的大部分道具，而只是將一兩個道具移交給子組件。考慮這個例子使用類似的形式：

export function Form({ handleSubmit, ...rest }) { 
    return (
    <form onSubmit={handleSubmit}> 
     <Field name="name" component={FormInput} /> 
     <SaveButton {...rest} /> 
    </form> 
); 
} 

外表單元件只關心提交函數。指示表單是否髒，有效等的其他道具將由<SaveButton />用於確定是否禁用該按鈕。

這很方便，因爲我們可以避免爲不使用它們的組件聲明道具。我們只是通過它們。但如前所述，請謹慎使用此模式，確保您知道您實際上正在執行哪些道具，因爲這可能會導致性能問題甚至副作用。實際上，我甚至會說，如果你發現自己經常通過層次傳遞道具，你可能會遇到設計問題，應該更有效地利用你的redux商店。

Answer 2

一般情況下，最好是隻通過它所需要的組件：以確定是否有組件需要改變

1. 更少的道具。
2. 更容易理解組件的功能。

您可以使用lodash的_.pick功能：

<Child {...(_.pick(this.props, ['key1', 'key2', ...]))} />