ES6 react.js 开发实践笔记

react构建指南

1,使用react需要用到脚手架 create react -app
     使用之前需要装有node ,因为需要用到node的npm
     安装的时候需要全局安装一个包,然后找个地方安装myapp
     替换淘宝镜像 $ npm install cnpm -g --registry=https://registry.npm.taobao.org
     以后使用cnpm会更快一些。
2,需要react router 路由管理
    安装所必须要的包:
   npm install --save-dev react-router
   npm install --save-dev react-router-dom

1,props

1,props初始化的时候使用,state是交互的时候使用,仅用户交互,会随着事件改变
2,需要从父组件传递用props,随着时间推移不会改变用props
3,props不给初始值的话,会默认为true,但是不建议不给初始值
4,Text.defaultProps={//defaultProps可以给Text组件添加props
   name:"hello"
     }
5,传递props值,可以用但是谨慎使用
组件类 :  
      ,//是一个React组件类大写 
component: 
    {this.props.name},{this.props,age}//在组件的时候获取的时候用

特点:1,属性不好改,定死的
    2,props一般用来传递数据,父组件向子组件传递数据。

2,state

1,constructor(props){super(props)}//组件应该始终调用基础构造函数,一般来说是初始化组件的时候执行的。
2,在constructor里面可以直接this.state={};给state赋值
3,在其他方法里面不允许这么写。需要this.setState({...})
4,this.props和this.state是队列更新dom,所以有可能会有没排队跟上的情况,不应该用他的上一次值来做操作。解决 的办法是用setState()来接受一个函数而不是上述对象,
this.setState((prevState, props)=>({
counter:prevState.counter+props.increment
}))

3,事件

1,react建议直接把监听事件写在dom中
2,on...事件监听只能作用于普通的html标签上,不能适用于组件上面
2,onClick={this.click}//绑定事件驼峰命名,写法如此
3,需要在construtor(){ this.click=this.click.bind(this)}//进行事件绑定
    然后lick(){this.setState({name:"000"})//才可以设置state的值}//不然设置不了state的值
4,如果嫌麻烦不愿bind,可以直接写成
    click=()=>this.setState({name:"000"})//绑定事件第二种方法,就不用bind绑定了,是ES6写法
    或者onClick={()=>this.click()};  然后click(){this.setState({name:"000"})}//这样也不用绑定bind了

4,组件

1,如果一个新组件 retrun null或者retrun false,则这个新组件讲不会显示,但是会执行生命周期方法。
2, {a&&aa},如果a有值或者是true,则显示aa组件,否则不显示
3,false,null,undefined,值为这些的条件都不渲染。
4,不受控组件的解决方案:
   支持defaultChecked,//不能直接使用checked因为使用了就不可变了