javascript - 用 vanilla javascript 重写 React 功能组件

Question

我很难理解 React 中的函数组件如何通过 es6 将 props 作为参数放置在对象中。这是es6功能的一部分吗？或者它是 React 的一部分，可以神奇地将 props 作为参数传递出来，而不必引用 this.props... ？如果有人可以用一个函数(而不是像 Babel repl 那样的 React.createElement )为我重写下面的 vanilla js 组件，那将会非常有帮助。

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

它正在使用destructuring是的，它是标准的一部分。

它所做的基本上相当于说

const repos = props.repos;

如果您有 props 作为参数，您会做什么

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

在 ES3 中，您还必须拼写出 function 关键字并使用 var 而不是 const。

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

所以唯一的 React 魔法是使用 JSX 在代码中内联标记。