【React】React.Component小结

React.Component 是一个抽象的Class，通常继承该类来构建自定义的Component。 Component可以将U分离成独立的碎片，有点类似于JavaScript的function，它接受一个任意的输入（props）并返回一个React element描述屏幕中的内容。

有两种方法构建Components

1 JavaScript函数

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

注意： Component必须返回单个根元素，因而要用

将包住。

2 利用React.Component 创建

class Greeting extends React.Component {
  constructor(props){
    super(props);
    this.state = {
       color: props.initialColor
    };

  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

必须包含render()方法

Component 生命周期

1 Mounting （挂载）

• constructor() // 构造函数
• componentWillMount()
• render()
• componentDidMount()

2 Updating

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

3 Unmounting
-componentWillUnmount()

每个Component中有
setState()
通过this.setState({value: dddd}) 更新

Class Properties

-defaultProps

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

-displayName
string用来在调试中显示信息

-propTypes

class CustomButton extends React.Component {
  // ...
}

CustomButton.propTypes = {
  color: React.PropTypes.string
};

Instance Properties

props

<Greeting  initialColor='blue' />

state
存储一些数据信息，如果不在render()中使用，则最好不要放在state中。