Почему свойства в props.functionName нужно вызывать только иногда?

Нет. Имя, которое вы используете, полностью зависит от того, как дочерний компонент обрабатывает переданные ему реквизиты. Как родительский компонент определяет, какое значение передать, совершенно не имеет значения.

Если реквизиты помещены в переменную с именем props, вам необходимо получить к ним доступ через объект, хранящийся в переменной.

const Child = (props) => {
    props.functionName();
    ...
}

Если первым аргументом является деструктурированный, то каждое свойство сохраняется в своей собственной переменной.

const Child = ({functionName}) => {
    functionName();
    ...
}

Если значение копируется в другую переменную внутри компонента, вы также можете использовать переменную, в которую оно было скопировано.

const Child = (props) => {
    const functionName = props.functionName();
    functionName();
    ...
}

При взаимодействии с дочерним компонентом имя, которое вы используете для чего-либо в своем родительском компоненте, может отличаться от реквизита, который требуется дочернему компоненту.

Просто, например, скажем, что ваш родительский компонент имеет какое-то отношение к школе, и у вас есть:

const [studentId, setStudentId] = useState();
const [parentId, setParentId] = useState();

Но у вас также есть дочерний компонент для студентов, который ожидает поддержку id. Затем, чтобы передать ему studentId, вы должны сделать:

<Student id = {studentId} />

И в этом дочернем компоненте вы должны сослаться на него, выполнив props.id.

Вы бы не хотели делать

const [id, setId] = useState();

в родительском компоненте, а затем

<Student id = {id} />

при передаче его вниз, потому что тогда в родительском компоненте не будет ясно, к какому идентификатору относится это значение с отслеживанием состояния - вам, вероятно, придется добавить комментарий.

If so, why use the second design pattern?

Иногда, как в ситуации, которую я только что описал, дочерний компонент не разработан с учетом всех идентификаторов, используемых в родительском компоненте, что вполне разумно, именно это позволяет многим вещам в программировании быть модульными (и адаптируемыми и полезными). ). В результате иногда вам нужно, чтобы реквизит или переменная имели одно имя в родительском компоненте, а другое — в дочернем компоненте, что требует

<Child otherName = {functionName}/>

подход.

Ложь, это разрушает реквизиты в React;

Разрушение — это удобный способ извлечения нескольких значений из данных, хранящихся в (возможно, вложенных) объектах и ​​массивах.

реквизит — это объект, поэтому мы можем использовать деструктурирование.

Деструктуризация дает доступ к использованию реквизита в более читаемом формате и устраняет необходимость в реквизитах для каждого свойства.

<Child functionName = {functionName}  name = {name}/>;
const child = (props)=>{
    // you need to write props.functionName
    props.functionName();
    const thisName = props.name
};

const child =({functionName,name})=>{
    // you dont need to write *props.*
    functionName();
    const thisName = name 
};