react系列（4）props 与 state

旧城等待， 2021-09-14 10:22 294阅读 0赞

props和state用于组件的参数传递和状态变化。

## props ##

表示组件初始化参数，react官方认为，props应该是只读的，修改 props对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。该参数以向组件标签属性赋值的方式向组件传递数据，如<HelloWorld name="John"/>。获取参数时使用\{this.props.attr\}，attr表示属性名称。

结果：Hello React!  
（贴士）上例中getDefaultProps方法用于组件设置props默认。

在class创建的组件，通过配置 defaultProps来为props定义默认值：

class Greeting extends React.Component {
      render() {
        return (
          <h1>Hello, {this.props.name}</h1>
        );
      }
    }
    
    // 为属性指定默认值:
    Greeting.defaultProps = {
      name: 'Stranger'
    };
    
    // 渲染 "Hello, Stranger":
    ReactDOM.render(
      <Greeting />,
      document.getElementById('example')
    );

如果你没有给属性传值，它默认为 `true`。因此下面两个 JSX 是等价的：

如果你已经有了个 props 对象，并且想在 JSX 中传递它，你可以使用 ... 作为扩展操作符来传递整个属性对象。下面两个组件是等效的：

在ES6 class创建的组件，可以通过PropTypes检查入参的数据类型是否正确，PropTypes 包含一整套验证器，可用于确保你接收的数据是有效的。当你给属性传递了无效值时，JavsScript 控制台将会打印警告。出于性能原因，propTypes 只在开发模式下进行检查。如

import PropTypes from 'prop-types';
    
    class Greeting extends React.Component {
      render() {
        return (
          <h1>Hello, {this.props.name}</h1>
        );
      }
    }
    
    Greeting.propTypes = {
      name: PropTypes.string
    };

但一般项目开发情况下会使用debugger模式即可，若出于代码的可读性需求，可以加上，毕竟其表达了组件的入参数据类型。入参数据类型可参考：[https://react.docschina.org/docs/typechecking-with-proptypes.html][https_react.docschina.org_docs_typechecking-with-proptypes.html]

（贴士）除了PropTypes外，也可以使用 第三方库[Flow][]这样的静态类型检查器，可到react官网文档中查看用法。

## state ##

表示组件状态，状态与属性十分相似，但是状态是私有的，完全受控于当前组件。状态的更新意味着组件数据的更新，和props主要的区别在于props是不可变的，状态更新时会自动重新渲染用户界面（不要操作 DOM），如果你不在 `render()` 中使用某些东西，它就不应该在状态中。另外，有一个判断某数据模型是不是应该设为state的一个原则是：只要是父组件传入或者通过计算出来的，都不是state；只有随着时间改变（或用户操作）而改变的才是state。关于状态更新有两种方法：setState()和replaceState()。

（1）setState：设置状态，指合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。它并不会立即改变this.state，而是创建一个即将处理的state（执行到render方法时state已更新）。因此该方法并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。setState总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

（2）replaceState：替换状态，replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。说白了，组件this.state=\{...\}这个对象数据，只保留replaceState()里设置状态，即对象的Object.xxx属性，其他状态没了。

结果：点击文字后，文本和颜色发生变化。  
![Center][]

![Center 1][]

State和Props组合测试案例：

结果：  
![Center 2][]

## 强制渲染 ##

强制渲染，forceUpdate(function()\{//callback\});是指当一些很深的组件state已经改变了或有些变量不在state上，但是你又想达到这个变量更新的时候，可以在该组件上面调用forceUpdate()，而不是使用this.setState()。forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

结果：点击“click me to forceUpdate!”文本1秒后变为“(forceUpdate finish)”。

## 父影响子：父组件props更新使子组件state更新、重新渲染的多种方法 ##

方法1：巧用key，这种方法是通过key变化子组件会重新实例化 （react的key变化会销毁组件在重新实例化组件）

<Children key={this.state.key} a={this.state.a} b={this.state.b} /> //父组件调用子组件

方法2：利用ref父组件调用子组件函数（不符合react设计规范，但可以算一个方法，可以看本系列ref篇）

方法3：父级给子级传数据，子级只负责渲染（最符合react设计观念）推荐！！

当父组件通过props传入变量参数变化时，子组件通过生命钩子函数componentWillReceiveProps来处理，若经判断有参数变化时更改子组件状态，核心代码如下：

componentWillReceiveProps(nextProps) {
        const { data } = this.state
        const newdata = nextProps.data.toString()
        if (data.toString() !== newdata) {
          this.setState({
            data: nextProps.data,
          })
        }
      }

## 子影响父：子组件state更新使父组件state更新的方法 ##

父组件定义一个修改自身状态state的回调函数通过props传递给子组件，当子组件需要改变父组件state时，调用该回调函数即可。

[https_react.docschina.org_docs_typechecking-with-proptypes.html]: https://react.docschina.org/docs/typechecking-with-proptypes.html
[Flow]: https://flowtype.org/
[Center]: /images/20210813/f7bf2a1f2d03429c95b659c22329a8ce.png
[Center 1]: /images/20210813/f1935855df3a4da599af96b52d60a323.png
[Center 2]: /images/20210813/9a1723a6c39b4ea6b1fcb149a726522c.png