React面向组件化编程

1、组件类型

1、函数式组件

<script type="text/babel">
    //定义函数式组件
    function  Demo() {
        return <h2>我是用函数定义的组件（适用于简单组件的定义）</h2>
    }
    //渲染函数组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('example1'))
    </script>

2、类式组件

//创建类式组件
    class MyDemo extends ReactDOM.Component{
      render(){
        return <h2>我是用函数类式定义的组件（适用于复杂组件的定义）</h2>
      }
    }
   ReactDOM.render(<MyDemo/>,document.getElementById('ww'))

2、组件三大核心属性

1、state状态

理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
3. 组件中render方法中的this为组件实例对象
4. 组件自定义的方法中this为undefined，如何解决？
   a) 强制绑定this: 通过函数对象的bind()
   b) 箭头函数
5. 状态数据，不能直接修改或更新

<script type="text/babel">
  
  class Like extends React.Component{
      //初始化状态
      state={isLike:false}

    render(){//render调用 1+n
      //读取状态
      const {isLike}=this.state
      return <h2 onClick={this.demo}>天气{isLike? '炎热':'凉爽'}</h2>
    }
    //自定义方式 要用赋值语句的形式+箭头函数
     demo=()=>{
      //获取原来isLike的值
       const  isLike=this.state.isLike
       //状态必须通过setState,且更新是一种合并
       this.setState({isLike: ! isLike})

    }
  }

  ReactDOM.render(<Like/>,document.getElementById('example'))
</script>

2、props（properties的简写）

1. 组件标签的所有属性放在props中
2. 作用
   a)通过标签属性从组件外向组件内传递变化的数据
   b) 注意: 组件内部不要修改props数据
3. 内部读取属性

this.props.name

class Person extends React.Component{
 render(){
   return (
           <ul>
             <li>名字：{this.props.name}</li>
             <li>年龄：{this.props.age}</li>
           </ul>
   )
 }
}
//渲染到页面
 ReactDOM.render(<Person name="等等" age="19"/>,document.getElementById('example1'))
//批量传入
 const p={name:'等',age:12}
 ReactDOM.render(<Person {...p}/>,document.getElementById('test'))
</

4. 对props中的属性值进行类型限制和必要性限制
   引入prop-types.js库

<!--引入prop-types,用于对组件标签属性进行限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
//用于限制属性的类型
Person.propTypes={
  name:React.PropTypes.string.isRequired
}
//指定默认的标签属性值
Person.defaultProps={
  age:20
}

5.props是只读

3、refs和事件处理

组件内的标签都可以定义 ref 属性来标识自己