react学习笔记
1：组件的编写形式：
1.1 直接写在同一个页面：
import React from 'react'; import { Link, Router, Route } from 'react-router-dom'; import { browserHistory } from 'react-router'; import * as routePaths from './../constants/routePaths'; class Welcome extends React.Component { render() { return ( <div className="welcome"> <h1>click me{this.props.name}</h1> </div> ); } } class Index extends React.Component { constructor(props) { super(props); this.state = { }; this.handle = this.handle.bind(this); } handle() { alert('你看你看~'); } render() { return ( <div className="wrapper"> <Welcome></Welcome> <h1 onClick={this.handle}>这是首页</h1> <div className="mc"> <Link to={routePaths.CARD}> <button>点击跳转</button> </Link> </div> </div> ); } } export default Index;
1.2 写在外面
2：传入props的不同：
3. 嵌套组件：
最外层;
import React from 'react'; import { Link, Router, Route } from 'react-router-dom'; import { browserHistory } from 'react-router'; import * as routePaths from './../constants/routePaths'; import Welcome from './../../component/Welcome.jsx'; class Index extends React.Component { constructor(props) { super(props); this.state = { }; this.handle = this.handle.bind(this); } handle() { alert('你看你看~'); } render() { return ( <div className="wrapper"> <Welcome name='sara'></Welcome> <Welcome name='xiaohua'></Welcome> <Welcome name='lili'></Welcome> <Welcome name='sss'></Welcome> <h1 onClick={this.handle}>这是首页</h1> <div className="mc"> <Link to={routePaths.CARD}> <button>点击跳转</button> </Link> </div> </div> ); } } export default Index;
welcome组件：
import React from 'react'; import UserInfo from './UserInfo.jsx'; class Welcome extends React.Component { render() { return ( <div className="welcome"> <h1>click me--{this.props.name}</h1> <UserInfo age="14"></UserInfo> </div> ); } } export default Welcome;
UserInfo 组件：
import React from 'react'; class UserInfo extends React.Component { render() { return ( <div className="user-info"> <h4>我的年龄是{this.props.age}</h4> </div> ); } } export default UserInfo;
4：super中类的继承
如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;
如果你在constructor中要使用this.props,就必须给super加参数：super(props)；
（无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的；）
如果没用到constructor,是可以不写的,直接：
<h1>Hello, {this.props.name}!</h1>
5： ES6中规定 类中方法之间不需要逗号分隔，加了会报错。
`React.createClass`是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件；
该方法内部的函数之间有逗号分隔：
React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，ES6中规定 类中方法之间不需要逗号分隔，加了会报错。
不同之处：
createClass 方法接受一个 getInitialState 函数作为参数一部分，这个函数会在组件挂载（mount）时被调用一次。
ES6 class 使用构造函数。在调用 super 之后，直接设置 state 即可。
Facebook 已经声明 React.createClass 最终会被 ES6 class 取代，不过他们也说「我们不会废弃 React.createClass，直到我们找到目前 mixin 用例的替代方案，并且在语言中支持类属性初始化器
目前在react较高版本中使用 createClass 会报错：
react最新版本抛弃使用了createClass这个函数，这个也是为了配合ES6 ，与时俱进。
6：state的问题（解决该问题的方法详见http://www.cnblogs.com/xiaozhumaopao/p/8311307.html）
6.1 在函数中改变或者获取state
handleClock(){ this.setState({isRender: false}); }
报错：
原因是es6中 取消了this的指向，我们可以在 constructor 中来改变 this.handleClick 执行的上下文
componentWillUnmount方法原本是挂载的组件卸载的时候执行的，但是我用下面的方法却不行：
render() { return ( <div className="wrapper"> <Clock name="xiahua" /> <div onClick={this.handleClocks}>移除</div> </div> ); } handleClocks(){ let wrapper = document.querySelector('.wrapper'); let clockdom = document.querySelector('.clocks'); wrapper.removeChild(clockdom); }
这样的原因是，真正的dom节点消失，而组件的卸载指的是render的时候取消渲染对应的虚拟dom节点，正确的做法如下：
（1）
class Index extends React.Component { constructor(props) { super(props); this.state = { isRender:true }; this.handleClock = this.handleClock.bind(this); } handleClock(){ this.setState({isRender: false}); } render() { return ( <div className="wrapper"> { this.state.isRender ? ( <Clock name="lalala" /> ) : null } <div onClick={this.handleClock}>移除</div> </div> ); }
或者：
这样在卸载完组件的时候 会执行componentWillUnmount定义的代码；
例如有定时器的功能，如果不在卸载组件的时候清除clearInterval，就会一直进行setInterval的函数；
7：setState异步处理
先上个代码：
addClock(){ this.setState({ initNum:this.state.initNum+3 }); console.log(this.state.initNum); }
我们在setState下面加了一个console，通过控制台可以发现，每次打印的值并不是当前输入的值，而是上一次输入的值，这是怎么回事呢？
在setState中，这是一个异步处理的函数，并不是同步的，console在setState后立刻执行了，所以这时候状态还没有真正变更完，所以这里取到的状态仍旧是更新前的
如果需要在更新状态后，再执行操作怎么办呢，setState还有第二个参数，接受一个callback，我们尝试将keyUp中代码改成这样
addClock(){ this.setState({ initNum:this.state.initNum+3 },()=>{ console.log(this.state.initNum); }); }
传入 setState 函数的第二个参数的作用是什么？
这时候log打印出来的只就是我们期望的内容，当每次状态更新成功后，都会调用传进去的callback函数。
因此总结如下：
react中的setState特点：
1.是异步操作函数；
2.组件在还没有渲染之前, this.setState 还没有被调用；
3.批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。
8：setState后面的会覆盖前面的
setState可以批量处理来提高它的性能，this.props 和 this.state的更新是异步的，不能依赖上一个state来计算下一个state的值
addClock(){ this.setState({ initNum:this.state.initNum+1 }); this.setState({ initNum:this.state.initNum+2 }); this.setState({ initNum:this.state.initNum+3 }); }
会只执行最后一个函数 +3 ；
请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：
this.setState(prevState => ( { initNum: prevState.initNum + 1 } )); this.setState(prevState => ( { initNum: prevState.initNum + 2 } ))
这样的话就不会被覆盖，注意的是：（返回对象外侧需要()包括起来）
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
9：props验证问题
从书籍和网上搜索到的信息 两种方式均无法验证props
## PropType
在定义一个通用组件或木偶组件时，我们最好声明这个组件接受的PropTypes。要注意的是，在React16之前，PropTypes是可以直接从React里获取的，从React16开始，PropTypes要从`prop-types这个模块中获取。
注意两点：
1：PropTypes出自的位置；
2：PropTypes要放在Clock的后面
10：带有参数的监听事件的写法：
<div onClick={()=>{ this.handleEvnt('1') }}>点击我1</div> <div onClick={()=>{ this.handleEvnt('2') }}>点击我2</div>
错误写法：
<div onClick={this.handleEvnt('2')}>点击我2</div>
