反応学習（1）

Reactの学習を始めましょう。もう1つ、より多くの機会があります。

プロセス：
仮想DOMオブジェクトを作成する仮想DOMオブジェクトを
レンダリングするReactDOM.renderが
最初の連絡先であり、これらは2つの記述方法です。

成分

このプロセスファクトリ関数コンポーネントとクラス継承メソッドが呼び出され、newがインスタンスを生成し、インスタンスオブジェクトのプロトタイプにrenderメソッドがあります。ReactDOM.render

（）レンダリングコンポーネントタグの基本プロセスを要約します
。1。内部にコンポーネントインスタンスオブジェクトを作成します。 React
2.。含まれている仮想DOMを取得し、それを実際のDOMに解析します。3。
指定されたページ要素に挿入します。

component_props

1.各コンポーネントオブジェクトにはprops属性があります
2.コンポーネントラベルのすべての属性はpropsに格納され
ます3.特定の属性値を内部で読み取ります：this.props.name4
。ラベル属性を介して外部から内部にデータを渡します（読み取り専用）
5。コンポーネントを他の人に使用したいので、小道具のプロパティ値のタイプと必要性を制限できます

//1. 定义组件类
  class Person extends React.Component {
    
    
    render() {
    
    
      console.log(this)
      return (
        <ul>
          <li>姓名: {
    
    this.props.name}</li>
          <li>性别: {
    
    this.props.sex}</li>
          <li>年龄: {
    
    this.props.age}</li>
        </ul>
      )
    }
  }
  // 对标签属性进行限制
  Person.propTypes = {
    
    
    name: PropTypes.string.isRequired,//必须要传
    sex: PropTypes.string,
    age: PropTypes.number
  }
  // 指定属性的默认值
  Person.defaultProps = {
    
    
    sex: '男',
    age: 18
  }

  //2. 渲染组件标签
  const person = {
    
    
    name: 'Tom',
    sex: '女',
    age: 18
  }
  ReactDOM.render(<Person {
    
    ...person}/>, document.getElementById('example1'))
  const person2 = {
    
    
    myName: 'JACK',
    age: 17
  }
  ReactDOM.render(<Person name={
    
    person2.myName} age={
    
    person2.age}/>,
    document.getElementById('example2'))

外部にネストのレイヤーが必要なため、直接書き込むことはできません。したがって、フレックスレイアウトのソリューションは、フラグメントをレイヤー化することです。もちろん、事前に導入する必要があります。

ネストされたコンポーネント

refs属性

これはインスタンスオブジェクトを指す実際のDOM組み込みメソッドを操作するために使用されます
。カスタムメソッドのthisはnullを指します。

すべてのイベントメソッドはインスタンスオブジェクト、つまりthisによって呼び出される必要があると定義されています。

状態属性

「ステートマシン」と呼ばれ、コンポーネントの状態値を更新することにより、対応するページ表示を更新（再レンダリング）します