本文已参与「新人创作礼」活动，一起开启掘金创作之路。

React组件基础

• 组件的特点:可复用、独立、可组合

1.组件的两种创建方式

• 使用函数创建组件：使用JS的函数（箭头函数）创建组件

  // 约定1：函数名称必须以大写字母开头
  // 约定2：函数必须有返回值，表示该组件的结构
  // 返回null 表示不渲染内容
  function Hello(){
      return (
      <div>这是一个函数组件.</div>
      )
  }
  
  // 箭头函数
  const Hello = () => (<div>这是一个箭头函数组件.</div>)
  

• 使用类创建组件

  类组件：使用ES6的class创建组件

  /*
  	1. 类名称必须以大写字母开头
  	2. 类组件应该继承React.Componet父类，从而可以使用父类中提供的方法或属性
  	3. 类组件必须提供render（）方法
  	4. render（）方法中必须有返回值，表示该组件的结构
  */
  class Hello extend React.Componet{
      render(){
          return <div>这是一个类创建的组件</div>
      }
  }
  
  ReactDOM.render(<Hello />, root)
  

2.事件处理

• 事件绑定

  语法：on+事件名称={事件处理程序}，如：onClick={()=> { ...}}

  class App extends React.Component {
      handleClick() {
          console.log('单击事件触发了')
      }
      
      render(){
          return (
          	<button onClick={this.handleClick}>点击触发事件</button>
          )
      }
  }
  

• 事件对象

  可以通过事件处理程序的参数获取到事件对象

  function handleClick(e){
      e.preventDefault()
      
      console.log('触发单击事件')
  }
  

3.有状态组件和无状态组件

• 函数组件又叫做无状态组件，类组件又叫做有状态组件
• 状态即数据
• 函数组件没有自己的状态，只负责数据展示
• 类组件有自己的状态，负责更新UI

4.组件中的state和setState（）

• state的基本使用

  state的值是个对象，表示一个组件中可以有多个数据

  class App extends React.Component{
      constructor(){
          super()
          
          //初始化state
          this.state = {
              count: 0
          }
      }
      render(){
          return (
          	<div>
              	有状态组件:{this.state.count}
              </div>
          )
      }
  }
  

• setState()修改状态

  语法：this.setState({})

• 从JSX中抽离事件处理程序

  JSX中掺杂过多js逻辑代码，会显得非常混乱

  将逻辑抽离出单独的方法中

5.事件绑定this指向

• 箭头函数

  箭头函数自身不绑定this，可以直接使用this指向组件实例

• Function.prototype.bind()

  利用ES5中的bind()方法，将事件处理程序中的this与组件实例进行绑定

  class Hello extends React.Component{
      constructor(){
          super()
          this.onIncrement = this.onIncrement.bind(this)
      }
      state = {
          count = 0
      }
      onIncrement(){
          this.setState({count: this.state.count + 1})
      }
      render(){
          return (
          	<button onClick={this.onIncrement}></button>
          )
      }
  }
  

• class的实例方法

  利用箭头函数形式的class实例方法

  class Hello extends React.Component{
      onIncrement = () => {
          this.setState({count: this.state.count + 1})
      }
      render(){
          return (
          	<button onClick={this.onIncrement}></button>
          )
      }
  }
  

6.表单处理

• 受控组件

  HTML中的表单元素是可输入的，也就是有自己的可变状态

  React中可变状态通常保存在state中，并且只能通过setState()方法来修改

  /*
  步骤：
  1. 在state中添加一个状态，作为表单元素的value值（控制表单元素的来源）
  2. 给表单元素绑定change事件，将表单元素的值赋给state
  */
  
  state = {txt :''}
  
  <input type="text" value={this.state.txt}
      onChange={e=>this.setState({txt: e.target.value})}
  />
  

• 非受控组件（DOM方式）

  /*
  步骤：
  1. 调用React.createRef()方法创建一个ref对象
  2. 创建好的ref对象添加到文本框中
  3. 通过ref对象获取文本框的值
  */
  
  constructor(){
      super()
      this.txtRef = React.createRef()
  }
  
  <input type="text" ref={this.txtRef} />
  
  Console.log(this.txtRef.current.value)