react基本用法 | 豆豉的博客

生命周期

result
result
getDefaultProps:对于每一个组件，这个方法只会被调用一次,可以在componentWillMount时候调用this.props.xx获取
Mounting:已插入真实的Dom
Updating:正在被重新渲染
Unmounting:已移除真实Dom

componentWillMount:被插入真实dom之前,对组件实例来说这个方法调用有且只有一次会被调用
render:创建一个虚拟dom，用来组件输出
componentDidMount:被插入真实dom之后
componentWillUpdate(object nextprops,object nextstate):更新之前
componentDidUpdate(object nextprops,object nextstate):更新之后
componentWillUnmount:移除之前

componentWillReceiveProps(object nextprops):在组件接收到一个新的prop时被调用。
shouldComponentUpdate(object nextprops,object nextstate):组件判断是否重新渲染时调用

装载组件触发

getDefaultProps：组件首次初始化实例的时候会被执行，第二次初始化实例的时候不会被执行。
getInitialState：每一次实例化的时候都会执行一次,调用的是状态
componentWillMount:只会在装载之前调用一次，这里还可以改变state的值
render：生成jsx，生成虚拟dom，只能访问this.props和this.state，不允许改变状态和dom输出
componentDidMount:只存在于客户端，不存在服务器上。只会在new的时候调用一次，该阶段dom已经在页面上了，可以通过ReactDom.findDOMNode(this)，获取到页面的Dom节点。

更新组件触发

componentWillReceiveProps(object nextprops):组件将要接受到属性的时候调用，属性来自于父组件
shouldComponentUpdate(object nextprops,object nextstate):判断props和state是否相等，如果不想等就返回true，相等就返回false，false就不需要更新
componentWillUpdate(object nextprops,object nextstate)
render:
componentDidUpdate(object nextprops,object nextstate)

卸载组件触发

componentWillUnmount:组件销毁之前调用的函数

特殊点

自定义的react类名称是以大写字母开头。

render函数

一共有3个参数:
第一个参数：nextElement
第二个参数：container
第三个参数：callback

哪些组件应该有state？

大部分组件的工作应该是从Props中获取数据并且渲染出来，只有对于一些例如input输入，服务器请求或者时间变化等作出响应等才需要使用state，尽可能把组件无状态化。

哪些不应该作为state

1.计算所得数据
2.React组件
3.基于props的重复数据

Prop验证

React.ProTypes提供了很多验证器验证传入数据的有效性，为了性能方面的考虑，只在开发环境验证PropType

react组件Api

1.设置状态：setState
setState会触发一次组件重绘，除非shouldComponentUpdate设置为false
setState(object nextstate,callback)
2.替换状态：replaceState
replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。也就是假设之前有多个state的值，但是如果这些state值中某个值不在本次replace中，那么这个值就会被抛弃。
replaceState(object nextState[, function callback])
3.设置属性：setProps
从父组件到子组件，当外部集成时候需要向组件传递数据或通知React.render()组件重新渲染。
setProps(object nextProps[, function callback])
4.替换属性：replaceProps

replaceProps(object nextProps[, function callback])
5.强制更新：forceUpdate
6.获取DOM节点：findDOMNode
如果组件已经挂载到dom上，该方法返回对应的本地浏览器dom元素。
this.findDOMNode(this.refs.xx)
7.判断组件挂载状态：isMounted

bool isMounted //返回true或者false

如果父组件和子组件getDefaultProps里面同时设定了同一个属性

如果父组件和子组件的getDefaultProps共有一个属性，那么会取父组件里面该属性的值。

如果有mixin就会先执行mixin里面的方法，然后才会执行组件内的方法

注意事项

input 一定要添加／

Input里面建议使用defaultValue，如果使用了value，但是没有添加onChange事件输入框里面的内容就不能被改变
3.React.addons.LInkedStateMixin 可以用来链接状态

getInitialState(){
  Return {
        message:’react is very good’
    }
}
render(){
    <input type=“text” valueLink={this.linkState(“message”)} />
    <span>{this.state.message}</span>
}

4 React.unmountComponentAtNode( document.getElementById(“app”) );//从组件中清除已经挂载的React组件。