React state与props进修笔记

2024年3月9日 94次阅读 来源: Gideon

组件的状况与属性

组件本质上是状况机，输入肯定，输出肯定肯定。组件把状况与效果一一对应起来，组件中有state与prop（状况与属性）。

  • 属性(props)是由父组件传递给子组件的；
  • 状况(state)是子组件内部保护的数据，当状况发作变化的同时，组件也会举行更新。当状况发作转换时会触发差别的钩子函数，从而让开发者偶然机做出相应。

props

属性的用法

  1. 键值对：值能够有多种形式<HelloWorld name= ? />：

    • 字符串：”XiaoWang”;
    • 求值表达式 {123}、{“XiaoWang”};
    • 数组{[1,2,3]};
    • 变量{variable};
    • 函数求值表达式{function}（不引荐，假如须要函数能够零丁把函数提取出来然后零丁挪用函数）;
  2. 睁开语法{…props}：

React会自动把对象中的属性和值当作属性的赋值

var HelloWorld =React.createClass({
    rencer:function () {
        return <p>Hello,{this.props.name1 + ' 'this.props.name2}</p>;
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name1:'Tim',
            name2:'John',
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return <div>
        <HelloWorld name={...this.state}></HelloWorld>
        <br/>
        <input type="text" onChange={this.handleChange} />
        </div>
    },
});
ReactDom.render(<HelloUniverse />,document.body);

  1. setProps：

    var HelloWorld =React.createClass({
    rencer:function () {
        return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
    },
});
var instance = React.render(<HelloWorld />,document.body);
instance.setProps({name:'Tim'});

setProps(object nextProps[, function callback])能够设置组件的属性。这个要领已过期了（与replaceProps等一样），不久将被删除。这个要领不支撑ES6类组件React.Component扩大。

propTypes

组件的属性能够接收恣意值，字符串、对象、函数等等都能够。偶然，我们须要一种机制，考证他人运用组件时，供应的参数是不是符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,//这个title是必需的，而且它的值必需是字符串
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

getDefaultProps

getDefaultProps 要领能够用来设置组件属性的默认值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(<MyTitle />,document.body);

this.props.children

this.props 对象的属性与组件的属性一一对应，然则有一个破例，就是 this.props.children 属性。它示意组件的一切子节点。

state

组件在运行时须要修正的数据就是状况，this.state 是会跟着用户互动而发生变化的特征。组件免不了要与用户互动，React 的一大立异，就是将组件看成是一个状况机，一开始有一个初始状况，然后用户互动，致使状况变化，从而触发从新衬着 UI。

state事情道理

经常使用的关照 React 数据变化的要领是挪用 setState(data, callback)。这个要领会兼并（merge） data 到 this.state，并从新衬着组件。衬着完成后，挪用可选的 callback 回调。大部分情况下不须要供应 callback，由于 React 会担任把界面更新到最新状况。

getInitialState

object getInitialState()
getInitialState 要领用于定义初始状况，也就是一个对象，这个对象能够经由历程 this.state 属性读取。在组件挂载之前挪用一次。返回值将会作为 this.state 的初始值。

setState

setState(object nextState[, function callback])
兼并 nextState 和当前 state。这是在事宜处置惩罚函数中和要求回调函数中触发 UI 更新的重要要领。别的，也支撑可选的回调函数，该函数在 setState 实行终了而且组件从新衬着完成今后挪用。this.setState 要领用于修正状况值，每次修正今后，自动挪用 this.render 要领，再次衬着组件。

replaceState

replaceState(object nextState[, function callback])
类似于 setState()，然则删除之前一切已存在的 state 键，这些键都不在 nextState 中。

哪些组件应该有 State？

大部分组件的事情应该是从 props 里取数据并衬着出来。然则，偶然须要对用户输入、服务器要求或许时候变化等作出相应，这时候才须要运用 State。

尝试把尽量多的组件无状况化。如许做能断绝 state，把它放到最合理的处所，也能削减冗余，同时易于解释程序运作历程。

经常使用的形式是建立多个只担任衬着数据的无状况（stateless）组件，在它们的上层建立一个有状况（stateful）组件并把它的状况经由历程 props 传给子级。这个有状况的组件封装了一切用户的交互逻辑，而这些无状况组件则担任声明式地衬着数据。

参考文章

    原文作者：Gideon
    原文地址: https://segmentfault.com/a/1190000005863638
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞