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

Posted 2023-03-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端一个更底层库-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.getElementByIdccontainer));

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 可以取得组件实例，进而取得原生节点。