Typechecking With PropTypes 类型检查和 PropType

typecheck with proptypes资源：执行和安装等详解
随着应用程序的增长,你可以捕捉很多typechecking的bug。对于某些应用程序,您可以使用JavaScript扩展流或打印稿typecheck整个应用程序。但是,即使你不使用这些,有一些内置typechecking反应能力。运行typechecking道具为组件,您可以指定特殊proptype属性。
proptype出口一系列的验证器,可用于确保您收到的数据是有效的。
需要单独的孩子 。您可以指定元素,只有一个孩子可以传递给组件为孩子。
默认支持值 　　您可以定义默认值的道具的特殊defaultProps财产分配。
如果您使用的是 babel 变换transform-class-properties一样,您也可以将defaultProps声明为静态属性在组件类的反应。这个语法还没有最终确定,但是需要编译步骤在浏览器中工作
defaultProps将用来确保this.props.name将有价值,如果它不是由父母指定的组件。之后会发生的proptype typechecking defaultProps解析,所以typechecking也将适用于defaultProps

class Greeting extends React.Component {static defaultProps = {name: 'stranger'}
  render() {
    return (<div>Hello, {this.props.name}</div>)}}
ReactDOM.render(<Greeting />,document.getElementById('root'));

Uncontrolled Components

在大多数情况下,我们推荐使用控制组件来实现形式。在一个控制组件,表单数据是由一个反应组件。另一种选择是不受控制的组件,表单数据是由DOM本身。写一个不受控制的组件,而不是写一个事件处理程序为每个状态更新,您可以使用一个表单值从DOM ref 引用。
因为一个不受控制的组件使DOM中的真理的来源,有时容易集成反应和non-React代码在使用不受控制的组件。它也可以稍微更少的代码,如果你想要快速和肮脏的。否则,你通常应该使用控制组件。如果还不清楚哪种类型的组件应该使用一个特定的情况下,你可能会发现在控制和不受控制的输入是有益的。
默认值。反应呈现生命周期的价值属性表单元素将会覆盖DOM中的值。不受控制的组件,你经常要应对指定初始值,但是离开后续更新不受控制。处理这种情况下,您可以指定一个defaultValue属性的值
一个< input type = “文件” / >总是不受控制的组成部分,因为它的价值只能由用户设定,而不是以编程方式。
你应该使用文件API与文件交互。

Web Components

反应和Web组件是用来解决不同的问题。Web组件提供强有力的封装可重用组件,而反应提供了一种声明性图书馆使DOM与您的数据同步。这两个目标是互补的。作为一名开发人员,您可以自由使用反应在你的Web组件,或者在反应中使用的Web组件,或两者兼而有之。 大多数人使用反应不使用Web组件,但是您可能想,特别是如果您使用的是第三方使用Web组件编写UI组件
注意: Web组件通常暴露一个命令式的API。例如,一个视频Web组件可能公开播放()和暂停()函数。访问命令api的Web组件,您将需要使用一个裁判直接与DOM节点。如果您使用的是第三方Web组件,最好的解决方案是编写一个组件的行为反应作为包装为您的Web组件。 事件发出Web组件可能不正确传播通过反应渲染树。您将需要手动将事件处理程序附加到处理这些事件在你的反应组件。
一个常见的混淆是Web组件使用“class”而不是“classname”

function BrickFlipbox() {
 return (<brick-flipbox class="demo"><div>front</div><div>back</div></brick-flipbox>);}

使用 React 在你的 web 组件

class XSearch extends HTMLElement {
  connectedCallback() {const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
    }}
customElements.define('x-search', XSearch);

组件迁移到使用独立prop-types时,如果直接调用它们所有验证器函数将抛出一个错误。这确保没人依靠他们在生产代码中,它是安全地带实施优化包的大小。