functionApp(){
return(



)
}

5、属性是只读的

考虑以下这种情况：

functionsum(a,b){
returna+b;
}

这种函数称为纯函数：它不改变自己的输入值，且总是对相同的输入返回相同的结果。

与之对立的，则是非纯函数，如：

functionwithdraw(account,amount){
account.total-=amount;
}

非纯函数在函数内改变了输入的参数。在React中，无论是通过function还是class声明组件，我们都不应该修改它自身的属性（props）。虽然React相当灵活，但是它也有一个严格的规定：所有的React组件都必须像纯函数那样来使用它们的props

8、State与生命周期

使用类定义组件有一些额外的好处，如拥有本地状态这一特性。

以下是一个类定义组件

classClockextendsReact.Component{
render(){
return(

Hello,world!
Nowis{this.props.date.toLocaleTimeString()}

);
}
}

需要注意的有：

类名即为组件名（无论是函数定义组件还是类定义组件，组件名称的首字母都必须大写，并且继承自React.Component）
使用render()方法，用来返回需要呈现的内容

1、在类中加入state

state是属于一个组件自身的。我们可以在类的构造函数constructor中来初始化状态，如：

constructor(props){
super(props)
this.state={
date:newDate()
}
}

如此一来，我们就可以在render()函数中使用this.state.xxx来引用一个状态

2、生命周期

在应用里，往往都会有许许多多的组件。在组件销毁后，回收和释放它们所占据的资源非常重要。

在时钟应用的例子里，我们需要在第一次渲染到DOM的时候设置一个定时器，并且需要在相应的DOM销毁后，清除这个定时器。那么，这种情况下，React为我们提供了生命周期的钩子函数，方便我们进行使用。在React中，生命周期分为：

1）Mount已插入真实DOM
2）Update正在重新渲染
3）Unmount已移出真实DOM

而相应的，生命周期钩子函数有：

• componentWillMount
• componentDidMount
• componentWillUpdate(newProps,nextState)
• componentDidUpdate(prevProps,prevState)
• componentWillUnmount()

此外，还有两种特殊状态的处理函数：

• componentWillReceiveProps(nextProps)已加载的组件收到新的参数时调动
• shouldComponentUpdate(nextProps,nextState)组件判断是否重新渲染时调用

因此，基于生命周期钩子函数，我们可以实现一个时钟应用如下：

classClockextendsReact.Component{
constructor(props){
super(props);
this.state={
date:newDate()
}
}
tick(){
this.setState({
date:newDate()
});
}
componentDidMount(){
this.timerId=setInterval(()=>{
this.tick()
},1000);
}
componentWillUnmount(){
clearInterval(this.timerId);
}
render(){
return(
Nowis{this.state.date.toLocaleTimeString()}
);
}
}

需要注意的是：

1）render()里用不到的state，不应该声明在state里
2）不能直接使用this.state.xxx=xxx的方式来改变一个state的值，应该使用this.setState()。如：

setName(){
this.setState({
name:'张不怂'
})
}

this.setState()会自动覆盖this.state里相应的属性，并触发render()重新渲染。

3）状态更新可能是异步的

React可以将多个setState()调用合并成一个调用来提升性能。且由于this.props和this.state可能是异步更新的，所以不应该依靠它们的值来计算下一个状态。这种情况下，可以给setState传入一个函数，如：

this.setState((prevState,props)=>({
counter:prevState.counter+props.increment
}));

9、事件处理

React元素的事件与DOM元素类似，不过也有一些区别，如：

1）React事件使用camelCase命名（onClick），而不是全小写的形式（onclick）
2）使用JSX，传入的是事件的句柄，而不是一个字符串

如以下的HTML：

ADD

使用React的方式描述如：

ADD

还有一个不同在于，在原生DOM中，我们可以通过返回false来阻止默认行为，但是这在React中是行不通的，在React中需要明确使用preventDefault()来阻止默认行为。如：

functionActionLink(){
functionhandleClick(e){
e.preventDefault();
alert('Hello,world!');
}

return(
ClickMe
);
}

这里，事件回调函数里的event是经过React特殊处理过的（遵循W3C标准），所以我们可以放心地使用它，而不用担心跨浏览器的兼容性问题。

注意：在使用事件回调函数的时候，我们需要特别注意this的指向问题，因为在React里，除了构造函数和生命周期钩子函数里会自动绑定this为当前组件外，其他的都不会自动绑定this的指向为当前组件，因此需要我们自己注意好this的绑定问题，
通常而言，在一个类方式声明的组件里使用事件回调，我们需要在组件的constructor里绑定回调方法的this指向，如：

classCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
counter:0
}
//在这里绑定指向
this.increment=this.increment.bind(this);
}
increment(){
this.setState({
counter:this.state.counter+1
});
}
render(){
return(

Thecounternowis:{this.state.counter}
+1

);
}
}

当然，我们还有另外一种方法来使用箭头函数绑定指向，就是使用实验性的属性初始化语法，如：

classCounterextendsReact.Component{
increment:()=>{
this.setState({
counter:this.state.counter+1
});
}
//...
}

3）像事件处理程序传递参数

我们可以为事件处理程序传递额外的参数，方式有以下两种：

this.deleteRow(id,e)}>DeleteRow
DeleteRow

需要注意的是，使用箭头函数的情况下，参数e要显式传递，而使用bind的情况下，则无需显式传递（参数e会作为最后一个参数传递给事件处理程序）

10、条件渲染

在React里，我们可以创建不同的组件来封装我们需要的功能。我们也可以根据组件的状态，只渲染组件中的一部分内容，而条件渲染就是为此而准备的。在React中，我们可以像在JavaScript中写条件语句一样地写条件渲染语句，如：

functionGreet(props){
constisLogined=props.isLogined;
if(isLogined){
return
Hello!
;
}
return
Pleasesignin
;
}

ReactDOM.render(
,
document.getElementById('root')
);

这将渲染出：

Hello!

1、使用变量来存储元素

我们也可以使用变量来存储元素，如：

functionLogBtn(props){
varbutton;
constisLogined=props.isLogined;
if(isLogined){
button=退出
}else{
button=登陆
}
return
Youcan{button}
;
}

ReactDOM.render(
,
document.getElementById('root')
);

2、使用&&运算符进行渲染

由于JavaScript语法对待&&运算符的性质，我们也可以使用&&运算符来完成条件渲染，如：

functionLogBtn(props){
varbutton;
constisLogined=props.isLogined;
return(
Hello
{!isLogined&&(
请登陆
)}

)
}

当props.isLogined为false的时候，就会渲染出：

Hello请登录

3、使用三目运算符进行渲染

我们可能已经发现了，其实JSX可以像一个表达式那样子灵活使用，所以，我们自然也可以使用三目运算符进行渲染，如：

functionLogBtn(props){
constisLogined=props.isLogined;
return(
Youcan
{isLogined?'退出':'登陆'}

)
}

4、阻止整个组件的渲染

有时候，我们希望是整个组件都不渲染，而不仅仅是局部不渲染，那么这种情况下，我们就可以在render()函数里返回一个null，来实现我们想要的效果，如：

functionLogBtn(props){
constisLogined=props.isLogined;
constisShow=props.isShow;
if(isShow){
return(
Youcan
{isLogined?'退出':'登陆'}

)
}
returnnull;
}

注意：组件里返回null不会影响组件生命周期的触发，如componentWillUpdate和componentDidUpdate仍然会被调用

11、列表渲染与keys

在JavaScript中，我们可以使用map()函数来对一个数组列表进行操作，如：

constnumbers=[1,2,3,4,5];
constdoubled=numbers.map(number=>number*2);
console.log(doubled);//得到[2,4,6,8,10]

同样的，在React里，我们也可以使用map()来进行列表渲染，如：

constnumbers=[1,2,3,4,5];
constlistItems=numbers.map(number=>{
return(
{number}
)
});

ReactDOM.render(
{listItems}
,
document.getElementById('root')
)

这将得到：

1
2
3
4
5

当然，我们还可以进行更好的封装，如：

functionNumberList(props){
constnumbers=props.numbers;
constlistItems=numbers.map(number=>{
return(
{number}
)
});

return
{listItems}
}

当我们运行以上的代码的时候，会发现控制台提示：Eachchildinanarrayoriteratorshouldhaveaunique"key"prop，因此，我们需要为列表项的每一个项分配一个key，来解决这个问题，通常而言，我们可以使用以下几种方式来提供key：

使用数据项自身的ID，如
使用索引下标（index），如：

constlistItems=numbers.map((number,index)=>{
{number}
});

但是React不推荐在需要重新排序的列表里使用索引下标，因为会导致变得很慢。
注意：只有在一个项的同胞里区分彼此的时候，才需要使用到key，key不需要全局唯一，只需要在一个数组内部区分彼此时唯一便可。key的作用是给React一个提示，而不会传递给组件。如果我们在组件内需要同样的一个值，可以换个名字传递，如：

constcontent=posts.map(post=>(

));

12、表单

表单和其他的React中的DOM元素有所不同，因为表单元素生来就是为了保存一些内部状态。在React中，表单和HTML中的表单略有不同

1、受控组件

HTML中，、、<select>这类表单元素会维持自身状态，并根据用户输入进行更新。不过React中，可变的状态通常保存在组件的this.state中，且只能用setState()方法进行更新，如：<br/> </p> <pre> classNameFormextendsReact.Component{ constructor(props){ super(props); this.state={ value:'' } this.handleChange=this.handleChange.bind(this); this.handleSubmit=this.handleSubmit.bind(this); } handleChange(event){ this.setState({ value:event.target.value }); } handleSubmit(event){ alert('Yournameis'+this.state.value); event.preventDefault(); } render(){ return( <formonSubmit={this.handleSubmit}> Name:<inputtype="text"value={this.state.value}onChange={this.handleChange}/> <inputtype="submit"value="Submit"/> </form> ) } } </pre> <p>和HTML中不同的是，React中的textarea并不需要写成<textarea>的形式，而是写成的形式便可。而对于HTML中的select标签，通常做法是：

A
B
C

但是React中，不需要在需要选中的option处加入selected，而只需要传入一个value，就会自动根据value来选中相应的选项，如：

A
B
C

那么如上述例子，C所在的这个option就会被选中

2、多个输入的解决办法

通常一个表单都有多个输入，如果我们为每一个输入添加处理事件，那么将会非常繁琐。好的一个解决办法是，使用name，然后根据event.target.name来选择做什么。如：

classFormextendsReact.Component{
constructor(props){
super(props);
this.state={
name:'',
gender:'男',
attend:false,
profile:''
};
this.handleInputChange=this.handleInputChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleInputChange(event){
consttarget=event.target;
constvalue=target.type==='checkbox'?target.checked:target.value;
constname=target.name;
this.setState({
[name]:value
});
}
handleSubmit(event){
this.setState({
profile:`姓名：${this.state.name}，${this.state.gender}，${this.state.attend?'参加':'不参加'}活动`
});
event.preventDefault();
}
render(){
return(

姓名：
性别：

男
女


是否参加：

您的报名信息：{this.state.profile}

)
}
}

3、非受控组件

大多数情况下，使用受控组件实现表单是首选，在受控组件中，表单数据是交由React组件处理的。如果想要让表单数据由DOM处理（即数据不保存在React的状态里，而是保存在DOM中），那么可以使用非受控组件，使用非受控组件，可以无需为每个状态更新编写事件处理程序，使用ref即可实现，如：

classNameFormextendsReact.Component{
constrcutor(props){
super(props)
}
handleSubmit(event){
console.log('Anamewassubmitted:',this.input.value)
event.preventDefault()
}
render(){
return(


Name:this.input=input}/>



)
}
}

对于非受控组件，如果要指定默认值，那么可以使用defaultValue，如：

this.input=input}/>

相应的，type="checkbox"和type="radio"，则使用defaultChecked

13、状态提升

当需要几个组件共用状态数据的时候，可以使用状态提升技术。核心思想在于：把数据抽离到最近的共同父组件，父组件管理状态（state），然后通过属性（props）传递给子组件。如实现一个货币转换的组件，可以如下：

1、首先定义转换函数

functionUSD2RMB(amount){
returnamount*6.7925;
}

functionRMB2USD(amount){
returnamount*0.1472;
}

functionconvert(amount,typeFn){
returntypeFn(amount);
}

2、定义组件

我们希望在RMB的输入表单上上输入的时候，USD的输入表单上的数值也同步更新，这种情况下，如果RMB组件自己管理自己的状态，是很难以实现的，因此，我们需要让这个状态提升自父组件进行管理。如下：

classCurrencyInputextendsReact.Component{
constructor(props){
super(props)
this.handleChange=this.handleChange.bind(this)
}
handleChange(event){
this.props.onInputChange(event.target.value)
}
render(){
constvalue=this.props.value
consttype=this.props.type
return(
{type}:
);
}
}

最后定义一个共同的父组件，如下：

classCurrencyConvertextendsComponent{
constructor(props){
super(props);
this.state={
type:'RMB',
amount:0
}
this.handleRMBChange=this.handleRMBChange.bind(this);
this.handleUSDChange=this.handleUSDChange.bind(this);
}
handleRMBChange(amount){
this.setState({
type:'RMB',
amount
});
}
handleUSDChange(amount){
this.setState({
type:'USD',
amount
});
}
render(){
consttype=this.state.type;
constamount=this.state.amount;
constRMB=type==='RMB'?amount:convert(amount,USB2RMB);
constUSD=type==='USD'?amount:convert(amount,RMB2USB);
return(

PleaseInput:



);
}
}

14、组合vs继承

React推崇更多的是使用组合，而非使用继承。对于一些使用场景，React给出的建议如下：

1、包含关系

当父组件不知道子组件可能的内容是什么的时候，可以使用props.children，如：

functionArticle(props){
return(


{props.children}

);
}

functionApp(){
return(
这是一篇文章
);
}

这将渲染得到：

这是一篇文章

我们还可以自定义名称，因为JSX实际上会被转化为合法的JS表达式，所以，还可以有：

functionArticle(props){
return(


{props.children}

);
}

functionApp(){
return(
这是一个侧栏
}>这是一篇文章
);
}

这将渲染得到：

这是一篇文章

2、何时使用继承？

在Facebook的网站上，使用了数以千计的组件，但是实践证明还没有发现需要使用继承才能解决的情况。

属性和组合为我们提供了清晰的、安全的方式来自定义组件的样式和行为，组件可以接受任意元素，包括：基本数据类型、React元素、函数。

如果要在组件之间复用UI无关的功能，那么应该将其提取到单独的JavaScript模块中，这样子可以在不对组件进行扩展的前提下导入并使用函数、对象、类

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。