初识React之组件创建和事件绑定

React创建组件的几种方法

• ES5组件 React.createElement()

const element = React.createElement(
 'h1',    //标签名
 {className: 'greeting'},     //类名
 'Hello, world!'   //文本节点
);

• 类组件 class User extends React.Component { }

class User extends React.Component {
  constructor(props) {
    super(props)
    // 当state发生变化时，视图自动变化（单向数据流）
    this.state = {
      msg: 'hello child'
    }
  }
  render() {
    return(
      <div>
        <h1>user page</h1>
      </div>
    )
  }
}

• 无状态组件 function User(props) { }

function Child(props) {
  return (
    <div>
      <h1>user 子组件</h1>
      <span>{props.aaa}</span>
      <span>-</span>
      <span>{props.bbb}</span>
      <span>-</span>
      <span>{props.ccc}</span>
    </div>
  )
}

• 高阶组件 function Hoc(Child) { }
• Hocks 组件

事件绑定的几种方法

class User extends React.Component {
  constructor(props) {
    super(props)
    }
    this.click3 = this.click3.bind(this, '三')
  }
  // 实例方法
  click1(arg, e) {
    console.log('clicked 1', arg, this, e)
  }
  click2(arg, e) {
    console.log('clicked 2', arg, this, e)
  }
  click3(arg, e) {
    console.log('clicked 3', arg, this, e)
  }
  render() {
    return(
      <div>
        <h1>user page</h1>
        <div>
          {/* 注释：常用下面两种方式进行事件绑定 */}
          <button onClick={this.click1.bind(this, '一')}>点击事件1</button>
          <button onClick={(e)=>this.click2('二', e)}>点击事件2</button>
          {/* 注释：一般不建议这么写 */}
          <button onClick={this.click3}>点击事件3</button>
        </div>
      </div>
    )
  }
}