在原版中重写 React 功能组件 javascript

Question

我很难理解通过 es6 的 React 中的功能组件如何通过将道具放在对象中来获取道具作为参数。这是es6特性的一部分吗？或者它是 React 的一部分，无需引用 this.props... 就可以神奇地将道具作为参数通过？如果有人可以用函数为我重写 vanilla js 中的以下组件（不像 Babel repl 那样 React.createElement），那将非常有帮助。

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 在代码中内联标记。

Answer 2

这是一个解构赋值，是 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}) 是 shorthand for ({repos:repos})）。但是，不同的名称可以更清楚地说明幕后发生的事情：

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

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

console.log(Repos(props));

请注意，这与默认参数无关。

在原版中重写 React 功能组件 javascript

Rewrite react functional component in vanilla javascript

javascript

components

jsx

ecmascript-6

reactjs