react学习笔记-react组件

React组件

特点：复用、独立、可组合

1、使用函数创建组件

1、函数组件：使用JS的函数或者箭头函数创建组件
2、约定1:函数名必须以大写字母开头
3、约定2:函数组件必须有返回值，表示组件的结构
4、如果返回值为null,表示不渲染任何内容	

例：	
function Hello() {
  return (	
    <div>这是一个函数组件</div>
  )
}

箭头函数：
const Hello = () => <div>这是一个函数组件</div>

2、使用类创建组件

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

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

3、react事件处理

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

例：
function Hello() {
  // 事件处理
  function submit() {
    alert('弹出了按钮')
  }
  return (
    <button onClick={submit}>按钮</button>
  )
}

4、事件对象

可以通过事件处理程序的参数获取到事件对象
React 中的事件对象叫做:合成事件(对象)
合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题

5、有状态组件和无状态组件

函数组件又叫做无状态组件,类组件又叫做有状态组件
状态(state)即数据
函数组件没有自己的状态,只负责数据展示(静)
类组件有自己的状态，负责更新山,让页面“动” 起来

总结：如果页面需要与客户产生交互，用有状态组件，反之用无状态组件

6、组件中的state和setState

state的基本使用：
状态(state)即数据,是组件内部的私有数据,只能在组件内部使用。
state 的值是对象，表示一个组件中可以有多个数据。
例：
class Hello extends React.Component{
  state = { // 初始化 state
    count:0
  }
  render() {
    return (
      <div>计算器：{ this.state.count} </div>
    )
  }
}
总结：1、状态即数据
     2、状态是私有的，只能在组件内部使用
     3、通过this.state 来获取状态


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

例1:
class Hello extends React.Component{
  state = { // 初始化 state
    count:0
  } // 对象中可有多个数据
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count} </h1>
        <button onClick={() => {
          this.setState({
            count:this.state.count + 1
          })
        }}>点击加1</button>
      </div>
    )
  }
}
上面的例子中我们是把逻辑代码写到结构中的，如果大量的使用会造成页面混乱，所以我们可以把逻辑方法单独抽离出来。

这里我们做一下抽离，例2:
class Hello extends React.Component{
  state = { // 初始化 state
    count:0
  } // 对象中可有多个数据

  // 事件处理抽离出来
  addCount() {
    console.log(this, '这里会是undifind');
    this.setState({
      count:this.state.count + 1
    })
    // 注意：这里这么写的话会报错，因为直接使用this会返回的undifind
  }
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count} </h1>
        <button onClick={subBtn}>点击加1</button>
      </div>
    )
  }
}
上面的代码我们做了一个抽离，但是在addCount()方法中会报错，报错的原因是因为this的指向问题，那为什么在例1结构中的逻辑不会报错呢？
这是因为箭头函数本身没有this,this会往外部去找，也就是render()方法，render()方法里面的this是可以获取到this.setState。所以这个报错我们可以通过箭头函数来解决。
例3:
class Hello extends React.Component{
  state = { // 初始化 state
    count:0
  } // 对象中可有多个数据

  // 事件处理抽离出来
  // 这里改成箭头函数
  addCount = () => {
    this.setState({
      count:this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count} </h1>
        <button onClick={this.addCount}>点击加1</button>
      </div>
    )
  }
}
总结：1、利用箭头函数自身不绑定this的特点
     2、render() 方法中的 this 为组件实例,可以获取到setState()