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

时间:2022-04-16 00:42:47

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

(目录)

这一篇学习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还可以实现数据分离,评论表单、重新渲染等等功能,多上手操练就会越来越熟悉。