Переписать реакцию функционального компонента в vanilla javascript

Question

Мне сложно понять, как функциональный компонент React через es6 получает реквизит в качестве аргумента, помещая его в объект. Является ли эта часть функции es6? Или это часть Реакта, чтобы магически вытащить реквизит в качестве аргумента без ссылки на this.props...? Если кто-то может переписать нижний компонент в vanilla js для меня с функцией (не React.createElement, как это делает Babel), это было бы очень полезно.

const Repos = ({repos}) => { 
    return (
    <div> 
     <h3> User Repos </h3> 
     <ul className="list-group"> 
     {repos.map((repo, index) => { 
      return (
      <li className="list-group-item" key={repo.name}> 
       <h4><a href={repo.html_url}>{repo.name}</a></h4> 
       <p>{repo.description}</p> 
      </li> 
     ) 
     })} 
     </ul> 
    </div> 
) 
} 

Answer 1

Это назначение деструкции и часть спецификации ES2015. Repos - функция, которая ожидает Object. Когда Repos называется он оценивает шаблон деструктурирующие и присваивает результат его единственный аргумент:

const Repos = ({repos}) => { 
 
    return repos; 
 
} 
 

 
const props = {repos: [1,2,3]}; 
 
const foo = {bar: "baz"}; 
 

 
console.log(Repos(props)); 
 
console.log(Repos(foo));

Название объекта (repos) и имя аргумента, который фактически передается Repos - то же самое, потому что данный шаблон деструктуризации не определяет другого (фактически ({repos}) является сокращением для ({repos:repos})). Тем не менее, другое название делает его более ясным, что происходит под капотом:

const Repos = ({repos:arg}) => { 
 
    return arg; 
 
} 
 

 
const props = {repos: [1,2,3]}; 
 

 
console.log(Repos(props));

Пожалуйста, обратите внимание, что это не имеет ничего общего с параметрами по умолчанию.

Answer 2

Она использует destructuring и да, это часть стандарта.

Что в основном делает это эквивалент говоря

const repos = props.repos; 

Что бы вы сделали, если бы у вас была props в качестве параметра

const Repos = (props) => { 
    const repos = props.repos; 
    return (
    <div> 
     (...) 
    </div> 
) 
} 

В ES3 вы также должны прописать функцию ключевое слово и использовать var вместо const.

var Repos = function(props) { 
    var repos = props.repos; 
    return (
    <div> 
     (...) 
    </div> 
) 
} 

Так что единственный React-магия происходит это использование JSX встраивать разметку в коде.