问题一：什么是 React Props？

w3schools.com 给出的定义是：

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

React Props are like function arguments in JavaScript and attributes in HTML.

React Props 可以被理解为是构建 React 组件所需的参数，和其他大部分高级语言的函数参数这个概念是十分接近的.从定义上来说,组件就像 JavaScript 的函数。组件可以接收任意输入(称为 props )，并返回 React 元素，用以描述屏幕显示内容。

问题二：如何使用 React Props？

import React from 'react'
import ReactDOM from 'react-dom'
function HelloMessage(props) {
    return <h1>Hello,{props.name}!</h1>;
}
 
const element = <HelloMessage name="Dongshufeng"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

在这个例子中， HelloMessage 这个组件的 name 属性拥有了Dongshufeng 这个值

我们调用了 ReactDOM.render() 方法并向其中传入了元素。
React 调用 HelloMessage 组件，并向其中传入了 {name: 'Dongshufeng'} 作为 props 对象。
Welcome 组件返回 <h1>Hello, Dongshufeng</h1>
React DOM 迅速更新 DOM ，使其显示为 <h1>Hello, Dongshufeng</h1>

默认 Props 的设置

我们可以通过组件类的 defaultProps 属性为 props 设置默认值，实例如下：

import React from 'react'
import ReactDOM from 'react-dom'
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
HelloMessage.defaultProps = {
    name: 'Dongshufeng'
};

const element = <HelloMessage/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

Props 的验证

Props 验证使用 propTypes，它可以保证应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串：

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types';
var title = "123";
//var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
MyTitle.propTypes = {
    title:PropTypes.string
}
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

这里网页上的显示始终都是 123 没有变化，但是按下 F12 查看控制台，会发现在 propTypes 不符时，控制台会发出类型不符的警告

Props 消息传递

Props are also how you pass data from one component to another, as parameters.

Props 可以在通过一个组件为另一个组件传递数据:

import React from 'react'
import ReactDOM from 'react-dom'
//import PropTypes from 'prop-types';
class Car extends React.Component {
    render() {
      return <h2>I am a {this.props.brand}!</h2>;
    }
  }
class Garage extends React.Component {
    render() {
      return (
        <div>
        <h1>Who lives in my garage?</h1>
        <Car brand="Ford" />
        </div>
      );
    }
}
ReactDOM.render(<Garage />, document.getElementById('example'));

当然也可以设置变量传递：

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}
class Garage extends React.Component {
  render() {
    const carname = "Ford";
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carname} />
      </div>
    );
  }
}
ReactDOM.render(<Garage />, document.getElementById('example'));

也可以作为一个对象来传递消息：

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand.model}!</h2>;
  }
}
class Garage extends React.Component {
  render() {
    const carinfo = {name: "Ford", model: "Mustang"};
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carinfo} />
      </div>
    );
  }
}
ReactDOM.render(<Garage />, document.getElementById('example'));

Props 是只读的

无论用函数或类的方法来声明组件, 它都无法修改其自身 props

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

问题三：什么是 React States？

w3cschool.com 给出的定义是：

React components has a built-in state object.

The state object is where you store property values that belongs to the component.

When the state object changes, the component re-renders.

React 的状态对象是内置的，这个状态对象储存这个组件的属性值，当状态对象更新时，组件将会重新渲染。React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

The state object is initialized in the constructor:

要设置状态对象，要在组件的构造函数中进行，以这个例子来看：

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstname: "Dong",
            lastname:"shufeng",
            school:"NEAU",
            age:"23"        
        };
    }
    changeSchool = () =>{        
        this.state.school == "NEAU"?this.setState({school:"HIT"}):this.setState({school:"NEAU"})
    }
    render() {
      return (
        <div>
            <h1>Self introduction<hr></hr>  {this.state.firstname}
            {this.state.lastname} is {this.state.age} years old
            and  in {this.state.school}
            </h1>
            <button type = "button" onClick  = {this.changeSchool}>
              changeSchool
            </button>            
        </div>
      );
    }
  }  
ReactDOM.render(<Me />, document.getElementById('example'));

w3cschool.com 中给出的关于 state 的用法总结：

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

Always use the setState() method to change the state object, it will ensure that the component knows its been updated and calls the render() method (and all the other lifecycle methods).

在运行这个例子的时候，总结了以下几点经验：

state 可作为一个容器容纳某个组件的很多属性
为了使用 state ,也就是说把 state 中的属性值渲染到页面上，我们应该在 render() 方法中返回一个状态对象
JSX 中一定要严格将标签闭合， HTML 中可以不计较的标签闭合问题一定不能掉以轻心
正确使用三元表达式，也可以完成条件判断的功能

关于 React Props 和 React States 的一些基础知识科普