生命周期
static getDerivedStateFromProps()方法
这是新版本的生命周期函数中新增的，通常很少使用。从字面翻译来看，这意味着在 render（）方法之前，props 返回一个对象来更新状态 state，该状态在组件的初始化和更新期间被调用。我们都知道，类类型组件中使用的 static 关键字表示类原型的静态方法。它接收两个参数，一个是 props，另一个是 state。传递的属性值用于替换当前组件中的状态。这个声明循环函数在语义上命名，这有助于理解和记忆。count 的值一直是通过 props 传入的 111,并不会发生任何改变。
static getDerivedStateFromProps(props) { return props;}ReactDOM.render(<Count count="111"/>,document.getElementById('root'))
复制代码
直接直译意味着当前组件已经安装，初始化和安装操作已经基本完成。通常，页面挂载后，我们可以向后台发送 Ajax 异步请求以获取数据，在该组件中还可以完成启动定时器和组件之间的消息订阅和发布。此组件在开发中经常使用，因此我们应该重点了解其用法。
const element = <HelloMessage/>;ReactDOM.render( element, document.getElementById('example'));
复制代码
旧版本中的生命周期函数 componentwillmount（）现在不推荐使用，其应用也非常有限。它被人们误用的可能性很高，这可能会导致潜在的无法检测的错误。
class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); }} class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); }}
复制代码
Props 验证
Props 验证使用 proptype，这可以确保正确使用我们的应用程序组件。React Proptypes 提供了许多验证器来验证传入数据是否有效。当无效数据被传递到 props 时，JavaScript 控制台将抛出警告。
class MyTitle extends React.Component { render() { return ( <h1>Hello, {this.props.title}</h1> ); }}
复制代码
下面的示例创建了一个 mytitle 组件。属性 title 是必需的，是字符串。非字符串类型将自动转换为字符串：
MyTitle.propTypes = { title: PropTypes.string};ReactDOM.render( <MyTitle title={title} />, document.getElementById('example'));
复制代码
可以将 prop 声明为指定的 JS 基本数据类型。默认情况下，这些数据是可选的
optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string,
复制代码
shouldComponentUpdate()方法
在组件更新之前调用此声明循环函数，这相当于在组件更新前添加一个阀门，以控制组件在满足什么条件时将被更新。可以控制是否通过返回值更新组件。如果更新返回 true，则不会更新。如果返回值为 false，则当不使用此声明循环函数时，默认返回值为 true。可以是多个对象类型中的一个：
optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]),
复制代码
自定义验证器。如果验证失败，则需要返回错误对象。不要使用“控制台警告”或抛出异常，因为“oneoftype”将无效。
customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } }
复制代码
元素变量
可以使用变量来存储元素。它可以帮助有条件地渲染组件的一部分，而输出的其余部分不会更改。在下面的示例中，我们将创建一个名为 logincontrol 的有状态组件。它将根据当前状态呈现＜loginButton/＞或＜logoutbutton/＞，并在上一个示例中呈现＜greeting/＞。
handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); }
复制代码
正确使用生命周期函数将使我们的开发更有效率。react official 提供了许多生命周期函数，但它们主要使用诸如 render（）、componentdidmount（）、componentwillunmount（）和 getderivedstatefromprops（）等生命周期函数。其他生命周期函数可以通过引用官方文档直接使用，这就是 react 中的生命周期函数。
class Counter extends React.Component{ constructor(props) { super(props); this.state = {clickCount: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); }
复制代码
Getderivedstatefromprops（）：在调用 render 方法之前调用，并将在初始装载和后续更新期间调用。根据 shouldcomponentupdate（）的返回值，确定 react 组件的输出是否受当前状态或属性更改的影响。Shouldcomponentupdate（）：当属性或状态更改时，将在渲染执行之前调用 Shouldcomponentupdate（）。Render（）：Render（）方法是类组件中必须实现的唯一方法。Getsnapshotbeforeupdate（）：在上次渲染输出（提交到 DOM 节点）之前调用。Componentdidupdate（）：它将在更新后立即调用。
tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, Runoob!</h1> <h2>现在时间是：{this.state.date.toLocaleTimeString()}.</h2> </div> ); }
复制代码
评论