React设计模式精华

目录

函数组件 (Function component)

属性解构 (Destructuring props)

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

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

条件渲染 (Conditional rendering)

子元素类型 (Children types)

数组做为子元素 (Array as children)

布局组件 (Layout component)

容器组件 (Container component)

高阶组件 (Higher-order component)

状态提升 (State hoisting)

受控输入 (Controlled input)

函数组件 (Function component)

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

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

function Greeting() {

return <div>Hi there!</div>;

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

function Greeting(props) {

let style = {

fontWeight: "bold",

color: context.color

};

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

}

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

function Greeting(props) {

解构赋值 是一种 JavaScript 特性。

出自 ES2015 版的 JavaScript 新规范。

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

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

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

let { name } = person;

同样适用于数组。

let things = ["one", "two"];

let [first, second] = things;

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

}

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

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

function Greeting({ name, ...restProps }) {

return <div>Hi {name}!</div>;

}

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

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

继续往下看...

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

}

这让 组件变得非常灵活。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)

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

<MyButton className="delete-btn">Delete...</MyButton>

在这个例子中把 替换成 btn delete-btn

JSX 中的属性展开 对先后顺序是敏感的