React的学习（1）

开始学习react，多会一个，机会越多，加油!

流程：
创建虚拟DOM对象
渲染虚拟DOM对象ReactDOM.render
第一次接触，这是两种写法

组件

这个过程工厂函数组件和class继承方法一个被调用了，一个new生成了实例，实例对象的原型中有render方法

总结ReactDOM.render()渲染组件标签的基本流程
1.React内部去创建组件实例对象
2.得到包含的虚拟DOM并解析成真正的DOM
3.插入到指定的页面元素内部

component_props

1.每个组件对象都会有props属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值：this.props.name
4.通过标签属性从外向内传递数据（只读）
5.因为组件你要给别人用，所以可以对props中的属性值进行类型限制和必要性限制

//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'))

因为要求外面必须嵌套一层，不能直接写，所以用flex布局解决办法就是套层fragment，当然需要提前引入

嵌套组件

refs属性

用来操作真实DOM
内置方法中的this指向的都是实例对象
自定义方法中的this指向的都是null

这里面在定义所有的事件方法必须由实例对象来调用，也就是必须this.什么

state属性

称为”状态机”，通过更新组建的状态值来更新对应的页面显示（重新渲染）