【前端】一个更底层库-React基础知识点第2篇

上一篇文章也是React基础知识点，了解到了React是什么？为什么要使用React？还知道了JSX概述，JSX嵌入变量，组合等知识点，接下来继续学习React知识点。分别从属性状态和相关API了解一下。

属性状态

属性状态要知道这几个PROPS，PROP VALIDATION，STATE。

PROPS

通过 this.props 可以获取传递给该组件的属性值，还可以 通过定义 getDefaultProps 天来指定默认属性值:
实例代码

varB=React.createClass({
getDefaultPropsO){
return {
title:'default'} ;}，
renderO{
return <b>{this.props.title}</b>
}
});
React.render(<div>
<B title-"指定"/> <B title={2}/>
</div>,document.getElementById('container'));

PROP VALIDATION

通过指定 propTypes 可以校验属性值的类型：

varB=React.createClass({
propTypes:{
title: React.PropTypes.string,
}，
getDefaultProps(){
return {
title:'default'};}，
render(){
return <b>{this.props.title}</b>
}
});React.render(<div>
<B title-"指定"/> <B title={2}/>
</div>,document.getElementByIdc container"));

STATE

组件内部的状态，可以使用 state：

var Timer = React.createClass({ 
getInitialstate: function() {
return {secondsElapsed: 0};初始值为0
}，tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});}，
componentDidMount:function() {
this.interval = setInterval(this.tick,1000);}，就会更新自己的状态
componentWillUnmount: functionO {
clearInterval(this.interval);
},render: function(){ 
return(
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>更新完之后，ui会自动同步。
);
}});

状态变了，数据变了，UI就自动变了。

FORM

react中的form和 html 的不同点:

value/checked 属性设置后，用户输入无效textarea 的值要设置在 value 属性select 的 value 属性可以是数组，不建议使用 option 的 selected 属性input/textarea 的 onChange 用户每次输入都会触发(即使不失去焦点)radio/checkbox 点击后触发 onChange。

CONTROLLED COMPONENTS

• 1.如果设置了 value 属性，那么改组件变为受控组件，用户无法输入，除非程序改变 value 属性：

var Test= React.createClass({render（）{return <input value="x"/>}});React.render(<Test />,document.getElementByIdc"container'));

• 2.可以通过监听 onChange 事件结合 state 来改变 input 的值：

var Test =React.createClass({getInitialState(){
return {
value: ‘xasdasdf’
};
},onChange(e){this.setState({value:e.target.value
});}，Render(){
return 
<input value={this.state.value} onChange={this.onChange}/>
}
});React.render(<Test />,document.getElementById('container'));

• 3.设置 defaultValue 为设置 input 的初始值，之后 input 的值由用户输入

var Test m React.createClass({Render(){
return <input defaultValue="xyz" />
}});React.render(<Test />,document.getElementByIdc'container'));

MIXIN

React中的Mixin 是一个普通对象，通过 mixin 可以在不同组件间共享。
代码实例：

var mixin = {propTypes:{title: React.PropTypes.string,getDefaultProps()return{title: 'default’};},};var B=React.createClass({mixins: [mixin], Render(){return <b>{this.props.title}</b>}});React.render(<div><B/> <A title={2}/><A/></div>,document.getelementByld（‘contalner'));

为了结合现有非 react 类库，通过 ref/refs 可以取得组件实例，进而取得原生节点。

COMPONENT API

React.createClass 定义组件时允许传入的配置
getDefaultProps 得到默认属性对象
propTypes 属性检验规则
mixins 组件间公用方法

COMPONENT LIFECYCLE

React.createClass 定义时允许传入的函数，会在特定生命

周期内调用

• 1.初次创建组件时调用

getinitialState 得到初始状态对象
render 返回组件树，必须设置
componentDidMount渲染到 dom 树中是调用，只在客户端调用，可用于获取原生节点

• 2.组件的属性值改变时调用

componentWillReceiveProps 属性改变调用
shouldComponentUpdate 判断是否需要重新渲染 render 返回组件树.必须设置
componentDidUpdate 渲染到 dom 树中是调用,可用于获取原生节点
最后是 componentWillUnmount 组件从 dom 销毁前调用

TOP API

React.createClass 创建组件类
React.findDOMNode 从组件实例获取 dom 根节点
React.render 渲染组件到 dom
React.Children.*操作 map/forEach children 工具类

#总结
本章了解到了React的属性状态和相关API方法，以及代码实例，React还可以实现数据分离，评论表单、重新渲染等等功能，多上手操练就会越来越熟悉。