组件 与 Props

• 组件一般在内部管理数据集合（state）
• 外部传入配置集合（props）

组件渲染的过程

1. React 主动调用组件
2. 将属性集合转换对象 props => { title: 'This is a Class Component." }
3. 将对象作为 props 传入组件
4. 替换 JSX 中的 props 或者 state 中的变量
5. ReactDOM 将最终的 React 元素通过一系列操作转换成真实 DOM 进行渲染

class Title extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { title, author, paragraph } = this.props;
    return (
      <div>
        <h1>{ title }</h1>
        <Author author={ author } />
        <Paragraph paragraph={ paragraph } />
      </div>
    )
  }
}
class Author extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>{ this.props.author }</p>
    )
  }
}
class Paragraph extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>{ this.props.paragraph }</p>
    )
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    title: 'This is a title',
    author: 'Lance',
    paragraph: 'This is a paragraph'
  }
  render() {
    return (
      <div className="container">
        <Title
          { ...this.state } />
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

展性 props 和数据/状态 state 区别

1. state ⇒ 数据池{} 组件内部的管理数据的容器
   1. 组件内部可写可读
2. props ⇒ 属性池{} 外部调用组件时传入的属性集合
   1. 组件内部可读不可写

Hooks 尝鲜

function Test(props) {
  // 创建state（通过 hooks [React.useState]）
  const [ title, setTitle ] = React.useState(props.title);

  return (
    <div className="container">
      <h1>{ title }</h1>
      <button onClick={ () => setTitle('This is my Component') }>Click</button>
    </div>
  )
}
ReactDOM.render(
  React.createElement(
		// <Test title="This is a title." />,
    Test,
    {
     title: 'This is a title.'
    }
  ),
  document.getElementById('app')
);

对 Props 进行限制

// 对标签属性进行类型、必要性的限制
static propTypes = {
	name: PropTypes.string.isRequired,
	sex: PropTypes.string,
	age:PropTypes.number,
	speak: PropTypes.func
}
// 指定默认标签属性值
static defaultProps = {
	sex: '不男不女’,
	age: 18
}