react 组件

组件的创建方式

函数创建组件

• 函数组件：使用JS的函数创建组件

• 约定1： 函数名称必须以大写字母开头

• 约定2： 函数组件必须有返回值，表示该组件的结构

• 如果返回值为null，表示不渲染任何内容

    function Hello() {
      return (
    <div>这是第一个函数组件</div>
   )
   }
   或 const Hello=()=>  <div>这是第一个函数组件</div>
   ReactDOM.render(<Hello />,document.getElementById('root'))
  

类组件（★★★）

• 使用ES6语法的class创建的组件

• 约定1：类名称也必须要大写字母开头

• 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性

• 约定3：类组件必须提供 render 方法

• 约定4：render方法中必须要有return返回值

  class Hello extends React.Component{
    render(){
     return (
       <div>这是第一个类组件</div>
     )
    }
  }
   ReactDOM.render(<Hello />,document.getElementById('root'))
  

React事件处理

事件绑定

• React事件绑定语法与DOM事件语法相似

• 语法：on+事件名称=事件处理函数，比如 onClick = function(){}

• 注意：React事件采用驼峰命名法

类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

this指向问题

• 事件处理程序的函数式函数调用方式，在严格模式下，this指向underfined
• render函数是被组件实例调用的，因此render函数中的this指向当前组件
• React内部会这样调用： instance.render()
• 推荐使用箭头函数性的实例方法，来解决this指向问题

State和SetState

state基本使用

 export default class extends React.Component {
   constructor(){
    super()

    // 第一种初始化方式
    this.state = {
        count : 0
    }
 }
 // 第二种初始化方式(推荐)
 state = {
    count:1
 }
 render(){
    return (
        <div>计数器 :{this.state.count}</div>
    )
  }
 }

setState() 修改状态

• 状态是可变的

• 语法：this.setState({要修改的数据})

• 注意：不要直接修改state中的值，这是错误的

• setState() 作用：1.修改 state 2.更新UI

• 思想：数据驱动视图

抽取事件处理函数

利用箭头函数形式的class实例方法(推荐)

// 事件处理程序
 onIncrement = () => {
   console.log('事件处理程序中的this：', this)
  this.setState({
  count: this.state.count + 1
  })
 }

表单处理

受控组件

• 在state中添加一个状态，作为表单元素的value值

• 给表单元素绑定change事件，将表单元素的值设置为state的值

多表单元素优化

• 给表单元素添加name属性（用来区分是哪一个表单），名称与state相同（用来更新数据的）

• 根据表单内容来获取对应值

• 在change事件处理程序中通过 [name] 来修改对应的state

  inputChange(e){
  let target = e.target;
  let value = target.type == 'checkbox' ? target.checked : target.value;
  this.setState({
    [e.target.name]: value
   })
  }