React基础

1.JSX语法

className

htmlFor

style = {{ }} 属性名驼峰写法，可以写逻辑运算符和三元运算符

注释：{ }

数组：必须有key

React组件：标签名的首字母大写

export default class Counter extends Component{

  constructor( ) {//ES2015类中的构造函数，实例化类时调用；类的默认方法，通常无须编写，初始化内部状态、为组件方法绑定this等情况需要写

    super( );//在子类的构造函数中，必须先调用super( )，才能使用this获取实例化对象

    this.state = { value : 0 };

  render( ){

    return (

       

            this.setState ({ value：this.state.value + 1 })}>

                INCREMENT

           

            Counter组件的内部状态：

           

{JSON.stringify( this.state , null , 2)}

       

        );

    }

}

2.状态

State——内部状态

this.setState 更新状态

this.state 获取状态

Props——组件传递参数

this.props获取

function Content ( props ) {

    return

Content组件的props.value：{ props.value }

;

}

验证props：

(1) 验证数据类型 React.PropTypes.array / bool / func / number / object / string

(2) 验证是否可以被渲染为子节点的对象 React.PropTypes.node

(3) ……

Context——跨级组件传递参数

适合使用场景：登录

3.调试

Chrome网上应用店搜索React Developer Tools