React學習—Props和State

1、Props

      一、定義：不管你用函數或類的方法來聲明組件, 它都沒法修改其自身 props. 在React中表明着數據，組件之間的數據傳遞是經過props進行的。

function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
     element,
     document.getElementById('root')
);
// 當 React 遇到一個表明用戶定義組件的元素時，它將 JSX 屬性以一個單獨對象的形式傳遞給相應的組件。 咱們將其稱爲 "props" 對象。

      二、屬性驗證 

import PropTypes from 'prop-types';

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

       -- 不一樣驗證器 

import PropTypes from 'prop-types';
MyComponent.propTypes = {
  // 你能夠聲明一個 prop 是一個特定的 JS 原始類型。
  // 默認狀況下，這些都是可選的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 任何東西均可以被渲染:numbers, strings, elements,或者是包含這些類型的數組(或者是片斷)。
  optionalNode: PropTypes.node,
  // 一個 React 元素。
  optionalElement: PropTypes.element,
  // 你也能夠聲明一個 prop 是類的一個實例。
  // 使用 JS 的 instanceof 運算符。
  optionalMessage: PropTypes.instanceOf(Message),
  // 你能夠聲明 prop 是特定的值，相似於枚舉
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  // 一個對象能夠是多種類型其中之一
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
  // 一個某種類型的數組
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  // 屬性值爲某種類型的對象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  // 一個特定形式的對象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  // 你可使用 `isRequired' 連接上述任何一個，以確保在沒有提供 prop 的狀況下顯示警告。
  requiredFunc: PropTypes.func.isRequired,
  // 任何數據類型的值
  requiredAny: PropTypes.any.isRequired,
  // 你也能夠聲明自定義的驗證器。若是驗證失敗返回 Error 對象。不要使用 `console.warn` 或者 throw ，
  // 由於這不會在 `oneOfType` 類型的驗證器中起做用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
  // 也能夠聲明`arrayOf`和`objectOf`類型的驗證器，若是驗證失敗須要返回Error對象。
  // 會在數組或者對象的每個元素上調用驗證器。驗證器的前兩個參數分別是數組或者對象自己，
  // 以及當前元素的鍵值。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

      三、context 跨層級數據傳遞

const PropTypes = require('prop-types');
class Button extends React.Component {
   render() {
      return (
         <button style={{background: this.context.color}}>
             {this.props.children}
        </button>
      );
  }
}
Button.contextTypes = {
  color: PropTypes.string
};

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }
  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

MessageList.childContextTypes = {
  color: PropTypes.string
};

2、state(組件的內部狀態)

      一、定義初始狀態： 類構造函數(class constructor) 初始化 this.state:

constructor() {
    super();
    this.state = {
        isHeartON:false
    }
}

      二、更新狀態

this.setState({
    isHeartON: isHeartON
})

      三、state(狀態)更新會被合併

      合併是淺合併，因此 this.setState({comments}) 不會改變 this.state.posts 的值，但會徹底替換this.state.comments 的值。

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
}
componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });
    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
}