React-1 组件

1.1 分类

函数组件 （常用）

类组件 （生命周期）

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头
ReactDOM.render{<Hello/>, document.getElemtById()};

为什么vue的template和react的render函数都只能有一个根元素？

答：就像一个HTML文档只能有一个根元素一样，多个根元素必将导致无法构成一颗树。

样式

推荐外引css文件，当然也可以用内联样式

数据传递

props: 父子组件之间的数据传递

• 父组件

  render(){
    return 
      <>
        <Child dataFromParents={dataFromParents}/>`
      </>
  }
  

• 子组件

  class Child extends React.Component{
    constructor(props){
      super(props);
      render(){
        const { dataFromParents } = this.props;
      }
    }
  }
  

区别

1.绑定事件的方式

• 类组件

  • 构造方法中绑定 (this)

  constructor(props){
    super(props);
    this.constructorClick = this.constructorClick.bind(this);
  }
  

• 函数组件

  • 箭头函数 (通过闭包访问属性，不存在内存泄漏)

  arrowFunctionClick = () => {
    this.log();
  }