react项目中的参数解构_React 模式（中文版）

React 模式（中文版） on Github

React 模式（原版）on Github

目录

函数组件 (Function component)

函数组件 是最简单的一种声明可复用组件的方法

他们就是一些简单的函数。

function Greeting() {
  return <div>Hi there!</div>;
}

从第一个形参中获取属性集 (props)

function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}

按自己的需要可以在函数组件中定义任意变量

最后一定要返回你的 React 组件。

function Greeting(props) {
  let style = {
    fontWeight: "bold",
    color: context.color
  };

  return <div style={style}>Hi {props.name}!</div>;
}

使用 defaultProps 为任意必有属性设置默认值

function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}
Greeting.defaultProps = {
  name: "Guest"
};

---

属性解构 (Destructuring props)

解构赋值 是一种 JavaScript 特性。

出自 ES2015 版的 JavaScript 新规范。

所以看起来可能并不常见。

好比字面量赋值的反转形式。

let person = {
     name: "chantastic" };
let {
     name } = person;

同样适用于数组。

let things = ["one", "two"];
let [first, second] = things;

解构赋值被用在很多 函数组件 中。

下面声明的这些组件是相同的。

function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}

function Greeting({ name }) {
  return <div>Hi {name}!</div>;
}

有一种语法可以在对象中收集剩余属性。

叫做 剩余参数，看起来就像这样。

function Greeting({ name, ...restProps }) {
  return <div>Hi {name}!</div>;
}

那三个点 (...) 会把所有的剩余属性分配给 restProps 对象

然而，你能使用 restProps 做些什么呢？

继续往下看...

---

JSX 中的属性展开 (JSX spread attributes)

属性展开是 JSX 中的一个的特性。

它是一种语法，专门用来把对象上的属性转换成 JSX 中的属性

参考上面的 属性解构,
我们可以 扩散 restProps 对象的所有属性到 div 元素上

function Greeting({ name, ...restProps }) {
  return <div {...restProps}>Hi {name}!</div>;
}

这让 Gretting 组件变得非常灵活。

我们可以通过传给 Gretting 组件 DOM 属性并确定这些属性一定会被传到 div 上

<Greeting name="Fancy pants" className="fancy-greeting" id="user-greeting" />

避免传递非 DOM 属性到组件上。 解构赋值是如此的受欢迎，是因为它可以分离 组件特定的属性 和 DOM/平台特定属性

function Greeting({ name, ...platformProps }) {
  return <div {...platformProps}>Hi {name}!</div>;
}

---

合并解构属性和其它值 (Merge destructured props with other values)

组件就是一种抽象。

好的抽象是可以扩展的。

比如说下面这个组件使用 class 属性来给按钮添加样式。

function MyButton(props) {
  return <button className="btn" {...props} />;
}

一般情况下这样做就够了，除非我们需要扩展其它的样式类