React 基础入门,基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出;
PS:代码包下载:
react包引入,在标签里引入包;
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</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>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="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.组件
var NewString = React.createClass({
render: function () {
var s=<h1 className="two" id="two">
<i id="one" >MMMMMM{this.id},{this.props.name},{this.props.id},{this.props.className}
</i></h1>;
return s;
}
})
组件的属性可以在组件类的 this.props 对象上获取。
就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,
必须包括一个且 只能包括一个顶层标签;
组件可使用单双标签,没区别,但是当需要获取组件的子元素的时候,必须使用双标签。
双标签获取组件下面的子类:
我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object
var NotesList = 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>
<span id="children">hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
3.PropTypes
var MyTitle = 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 : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}});
getDefaultProps 设置默认title的值。
ReactDOM.render(
<MyTitle />,
document.body);
当组件上没有title,this.props.title的值等于默认值 :Hello World;
ReactDOM.render(
<MyTitle title=“New title”/>,
document.body);
当组件上有title,this.props.title的值 :New title;
5、获取真实的DOM节点(ref)
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput111.focus();
this.refs.pp.style.color="red";
},
output:function(){
alert("wo xtet")
},
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput111" onClick={this.output} />
<input type="button" value="Focus the text input" onClick={this.handleClick}/>
<p ref="pp">{this.props.title}</p>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。并且可以操作这个DOM,和原生操作Js一样
6、This.state
在组件内可以定义状态,当用户改变这个状态的时候,页面会重新渲染。
getInitialState 是关键字,来定义组件状态
var LikeButton = 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() {
var text = this.state.liked11 ? 'like' : 'haven\'t liked';
var text1=this.state.love?"love":"hate";
return (
<p>
You {text} this. Click to toggle.
<br/>
<span onClick={this.handleClick}>you {text1} this.clcik to tpggle</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 操作节点一样方式
var num=12;
var Input = 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 () {
var value = this.state.value;
return (
<div value="div111" id="ee" name="owow">
<input id="mom" type="text" value={value} onChange={this.handleChange} />
<div>{this.state.value1}</div>
<p onChange={this.handleChange}>{value}</p>
<span>{this.props.value}</span>
</div>
);
}
});
ReactDOM.render(<Input value="!@21"/>, document.getElementById('example'));
8.组件的生命周期
组件的生命周期分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
附带代码:
var Hello = React.createClass({
getInitialState: function () {
console.log(this);
return {
opacity: 1.0
};
},
componentWillMount: function () {
this.timer = setInterval(function () {
var opacity = 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 (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});