您的位置：首页 > Web前端 > React

React 基础入门，基础知识介绍

2016-10-12 15:23 706 查看

React不管在demo渲染还是UI上，都是十分方便，本人菜鸟试试学习一下，结合阮一峰老师的文章，写下一点关于自己的学习react的学习笔记，有地方不对的地方，希望各位大牛评论指出；

PS：代码包下载：

react包引入，在标签里引入包；

<html>
<head>
<scriptsrc="../build/react.js"></script>
<scriptsrc="../build/react-dom.js"></script>
<scriptsrc="../build/browser.min.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="text/babel">
//**Ourcodegoeshere!**
</script>
</body>
</html>

首先，最后一个

<script>

标签的

type

属性为

text/babel

。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上

type="text/babel"

。

其次，上面代码一共用了三个库：

react.js

、

react-dom.js

和

Browser.js

，它们必须首先加载。其中，

react.js

是React的核心库，

react-dom.js

是提供与DOM相关的功能，

Browser.js

的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

当然在最后编译的时候可以直接使用JSx，引入一个JSXTransformer.js就可以直type中看使用text/Jsx这样的好处是在我的编译器（webstorm）中有关键词的颜色区分；

<html>
<head>
<scriptsrc="../build/react.js"></script>
<scriptsrc="../build/react-dom.js"></script>
<scriptsrc="../build/JSXTransformer.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="text/jsx">
ReactDOM.render(
<h1>Hello,world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

1.基础语法：

ReactDom.render工三个参数，第一个元素，第二个是绑定的元素，第三个是回调函数

JSX语法：遇到<>开头用HTML语法解析，遇到{}用javascript解析；

ReactDom.render(

<div>

{

names.map(function(name){

//这里可以定义变量

return<div>Hello,{name}!</div>

})

}

</div>,

document.getElementById('example')

)

2.组件

varNewString=React.createClass({
render:function(){
vars=<h1className="two"id="two">
<iid="one">MMMMMM{this.id},{this.props.name},{this.props.id},{this.props.className}
</i></h1>;
returns;
}
})

组件的属性可以在组件类的this.props对象上获取。

就是class属性需要写成className，for属性需要写成htmlFor，

必须包括一个且只能包括一个顶层标签；

组件可使用单双标签，没区别，但是当需要获取组件的子元素的时候，必须使用双标签。

双标签获取组件下面的子类：

我们可以用React.Children.map来遍历子节点，而不用担心this.props.children的数据类型是undefined还是object

varNotesList=React.createClass({
render:function(){
return(
<p>
{
React.Children.map(this.props.children,function(child){
console.log(child)
return<p>{child}</p>;
})
}
</p>
);
}
});
ReactDOM.render(
<NotesList>
<spanid="children">hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);

3.PropTypes

varMyTitle=React.createClass({

propTypes:{

title:React.PropTypes.string.isRequired,

},

render:function(){

return<h1>{this.props.title}</h1>;

}});

上面的Mytitle组件有一个title属性。PropTypes告诉React，这个title属性是必须的，而且它的值必须是字符串。现在，我们设置title属性的值是一个数值。

这样一来，title属性就通不过验证了

4.getDefaultProps

getDefaultProps:function(){

return{

title:'HelloWorld'

};

},

render:function(){

return<h1>{this.props.title}</h1>;

}});

getDefaultProps设置默认title的值。

ReactDOM.render(

<MyTitle/>,

document.body);

当组件上没有title，this.props.title的值等于默认值：HelloWorld；

ReactDOM.render(

<MyTitletitle=“Newtitle”/>,

document.body);

当组件上有title，this.props.title的值：Newtitle；

5、获取真实的DOM节点（ref）

varMyComponent=React.createClass({
handleClick:function(){
this.refs.myTextInput111.focus();
this.refs.pp.style.color="red";
},
output:function(){
alert("woxtet")
},
getDefaultProps:function(){
return{
title:'HelloWorld'};
},
render:function(){
return(
<div>
<inputtype="text"ref="myTextInput111"onClick={this.output}/>
<inputtype="button"value="Focusthetextinput"onClick={this.handleClick}/>
<pref="pp">{this.props.title}</p>
</div>
);
}
});

ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
);

文本输入框必须有一个ref属性，然后this.refs.[refName]就会返回这个真实的DOM节点。并且可以操作这个DOM，和原生操作Js一样

6、This.state

在组件内可以定义状态，当用户改变这个状态的时候，页面会重新渲染。

getInitialState是关键字，来定义组件状态

varLikeButton=React.createClass({
getInitialState:function(){
return{
liked11:false,
love:true
};
},
handleClick:function(event){
this.setState({liked11:!this.state.liked11});
this.setState({love:!this.state.love})
},
render:function(){
vartext=this.state.liked11?'like':'haven\'tliked';
vartext1=this.state.love?"love":"hate";
return(
<p>
You{text}this.Clicktotoggle.<br/>
<spanonClick={this.handleClick}>you{text1}this.clciktotpggle</span>
</p>
);
}
});

当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。

由于this.props和this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props表示那些一旦定义，就不再改变的特性，而this.state是会随着用户互动而产生变化的特性。

7.表单

this.props.value读取组件的属性（代码黄色处），而要定义一个onChange事件的回调函数，通过表单元素用event.target.value

非表单用event.target.innerHTMl操作节点一样方式

varnum=12;
varInput=React.createClass({
getInitialState:function(){
return{
value:'Hello!',
value1:num,
};
},
handleChange:function(event){
this.setState({value:event.target.value});
this.setState({value1:this.state.value1+=1});
},
render:function(){
varvalue=this.state.value;
return(
<divvalue="div111"id="ee"name="owow">
<inputid="mom"type="text"value={value}onChange={this.handleChange}/>
<div>{this.state.value1}</div>
<ponChange={this.handleChange}>{value}</p>
<span>{this.props.value}</span>
</div>
);
}
});

ReactDOM.render(<Inputvalue="!@21"/>,document.getElementById('example'));

8.组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实DOM

Updating：正在被重新渲染

Unmounting：已移出真实DOM

React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(objectnextProps,objectnextState)

componentDidUpdate(objectprevProps,objectprevState)

componentWillUnmount()

此外，React还提供两种特殊状态的处理函数。

componentWillReceiveProps(objectnextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(objectnextProps,objectnextState)：组件判断是否重新渲染时调用

附带代码：

varHello=React.createClass({
getInitialState:function(){
console.log(this);
return{
opacity:1.0
};
},
componentWillMount:function(){
this.timer=setInterval(function(){
varopacity=this.state.opacity;
opacity-=.05;
if(opacity<0.1){
opacity=1.0;
}
this.setState({
opacity:opacity
});
//bind(this)你可以当做是使用外部的this(React组件的)覆盖函数中的this.
}.bind(this),100);
},
render:function(){
return(
<divstyle={{opacity:this.state.opacity}}>
Hello{this.props.name}
</div>
);
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航