React组件基础学习

1.React组件介绍

组件是React的一等公民，使用React就是在用组件。
组件表示页面中的部分功能。
组合多个组件实现完整的页面功能。
特点：可复用、独立、可组合。

2.React组件的两种创建方式

2.1 使用函数创建组件

函数组件：使用js的函数
约定1：函数名称必须以大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值是null，表示不渲染任何内容

// 普通函数
function Hello(){
  return (
    <div>这是我的第一个组件</div>
  )
}
// 箭头函数
const Hi = ()=><div>这是我的第一个函数组件</div>

ReactDOM.render(<Hi></Hi>, document.getElementById('root'))

2.2 使用类创建组件

类组件：使用ES6的class创建的组件
约定1：类名称也必须以答谢字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
约定3：类组件必须提供render()方法
约定4：render()方法必须有返回值，表示该组件的结构

class Hello extends React.Component{
  render(){
    return (
      <div>这是我的第一个类组件</div>
    )
  }
}

ReactDOM.render(<Hello></Hello>, document.getElementById('root'))

2.3 抽离为独立JS组件

组件作为一个独立的个体，一般都会放到一个单独的JS文件中。
1.创建Hello.js
2.在Hello.js中导入React
3.创建组件（函数 或 类）
4.在Hello.js中导出该组件
5.在index.js中导入Hello组件
6.渲染组件

3.React事件处理

1.事件绑定
React事件绑定语法与DOM事件语法相似
语法：on + 事件名称 = {事件处理程序}，比如：onClick = {() => ()}
注意：React事件采用驼峰命名法，比如onMouseEnter、onFocus

类组件事件

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

函数组件事件

function App(){
  function handleClick(){
    console.log('事件触发了')
  }
  return (
    <button onClick={handleClick}>点我</button>
  )
}

2.事件对象
可以通过事件处理程序的参数获取到事件对象
React中的事件对象叫做：合成事件（对象）
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

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

函数组件又叫做无状态组件，组件类又叫做有状态组件
状态（state）即数据
函数组件没有自己的状态，只负责数据显示（静）
类组件有自己的状态，负责更新UI，让页面“动”起来

5. 组件中的state和setState

5.1 state的基本使用

状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
获取状态：this.state

class App extends React.Component{
  // constructor(){
  //   super()

  //   // 初始化state
  //   this.state = {
  //     count: 0
  //   } 
  // }

  // 简化语法初始化state(推荐)
  state = {
    count: 0
  }
  render(){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
      </div>
    )
  }
}

5.2 setState（）修改状态

状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的！！！
setState()作用：1.修改state，2.更新UI
思想：数据驱动视图

class App extends React.Component{
  // constructor(){
  //   super()

  //   // 初始化state
  //   this.state = {
  //     count: 0
  //   } 
  // }

  // 简化语法初始化state(推荐)
  state = {
    count: 0
  }
  render(){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={()=>{
          this.setState({
            count:this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}

从JSX中抽离事件处理程序
JSX中掺杂过多JS逻辑代码，会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰

6.事件绑定this指向

6.1 箭头函数

利用箭头函数自身不绑定this的特点

class App extends React.Component{
  // constructor(){
  //   super()

  //   // 初始化state
  //   this.state = {
  //     count: 0
  //   } 
  // }

  // 简化语法初始化state(推荐)
  state = {
    count: 0
  }
  onIncrement(){
    this.setState({
      count:this.state.count + 1
    })
  }
  render(){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={()=>this.onIncrement()}>+1</button>
      </div>
    )
  }
}

6.2 Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      count: 0
    }
    this.onIncrement = this.onIncrement.bind(this)
  }
  
  onIncrement(){
    this.setState({
      count:this.state.count + 1
    })
  }
  render(){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        {/* 箭头函数中的this指向外部环境，此处为：render()方法 */}
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}

6.3 class的实例方法（推荐）

利用箭头函数形式的class实例方法
注意：该语法是实验性的语法，但是由于babel的存在可以直接使用

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      count: 0
    }
    this.onIncrement = this.onIncrement.bind(this)
  }
  
  onIncrement = () => {
    this.setState({
      count:this.state.count + 1
    })
  }
  render(){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        {/* 箭头函数中的this指向外部环境，此处为：render()方法 */}
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}

7.表单处理

7.1 受控组件

html中的表单元素是可输入的，也就是有自己的可变状态
但是，React中可变状态通常保存在state中，并且只能通过setState（）方法来修改
React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
受控组件：其值受到React控制的表单元素
步骤：
1.在state中添加一个状态，作为表单元素的value值（控制表单元素值得来源）
2.给表单元素绑定change事件，将白哦单元素的值设置为state的值（控制表单元素值得变化）

示例：

class App extends React.Component{
  state ={
    txt:'',
    content:'',
    city:'bj',
    isChecked: false
  }
  handleChange = (e)=>{
    this.setState({
      txt:e.target.value
    })
  }

  // 处理富文本框的变化
  handleContent = (e)=>{
    this.setState({
      content:e.target.value
    })
  }

  // 处理下拉框的变化
  handleCity = (e)=>{
    this.setState({
      city: e.target.value
    })
  }

  // 处理复选框的变化
  handleChecked = e =>{
    this.setState({
      isChecked:e.target.checked
    })
  }
  
  render(){
    return (
      
      <div>
        {/* 文本框 */}
        <input type="text" value={this.state.txt} onChange={this.handleChange}></input>
        <br/>

        {/* 富文本框 */}
        <textarea value={this.state.content} onChange={this.handleContent}></textarea>
        <br/>

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleCity}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        {/* 复选框 */}
        <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}></input>
      </div>
    )
  }
}

示例总结：
1.文本框、富文本框、下拉框 操作value属性
2.复选框 操作checked属性

多表单元素优化
问题：每个表单都有一个单独的事件处理程序处理太繁琐
优化：使用一个事件处理程序同时处理多个表单元素

多表单元素优化步骤
1.给表单元素添加name属性，名称与state相同
2.根据表单元素类型获取对应值
3.在change事件处理程序中通过[name]来修改对应的state

class App extends React.Component{
  state ={
    txt:'',
    content:'',
    city:'bj',
    isChecked: false
  }
  handleForm = (e)=>{
    // 获取当前DOM对象
    const target = e.target

    // 根据类型获取值
    const value = target.type === 'checkbbox' ? target.checked : target.value
    
    // 获取name
    const name = target.name

    this.setState({
      [name]:value
    })
  }
  
  render(){
    return (
      
      <div>
        {/* 文本框 */}
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm}></input>
        <br/>

        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        <br/>

        {/* 下拉框 */}
        <select name="city" value={this.state.city} onChange={this.handleForm}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        {/* 复选框 */}
        <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}></input>
      </div>
    )
  }
}

7.2 非受控组件(DOM)

使用步骤：
1.调用React.createRef()方法创建一个ref对象
2.将创建好的ref添加到文本框中
3.通过ref对象获取到文本框的值

class App extends React.Component{
  constructor(){
    super()
    // 创建ref
    this.txtRef = React.createRef()
  }

  getTxt = ()=>{
    console.log("文本框的值为：",this.txtRef.current.value)
  }

  render(h) {
    return (
      <div>
        <input type="text" ref={this.txtRef}></input>

        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
}

总结：
React组件基础
1.组件的两种创建方式:函数组件和类组件
2无状态（函数）组件，负责静悉结构展示
3.有状态〔类)组件，负责更新UI,让页面动起来
4．绑定事件注意 this指向问题
5.推荐使用受控组件来处理表单
6.完全利用S语言的能力创建组件，这是React的思想