React入门
一、文档结构
1、需要引入3个文件
<script src="build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="build/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="build/browser.min.js" type="text/javascript" charset="utf-8"></script>
2、script标签的type要写成type/babel
<body>
<div id="example1">
</div>
<div id="example2">
</div>
<div id="example3">
</div>
<!--类型改为babel，否则不会解析-->
<script type="text/babel">
ReactDOM.render(
<div>
<h1>我是h1</h1>
<h1>我是h1</h1>
</div>
,
document.getElementById("example2")
)
</script>
</body>
ReactDOM.render(html标签,渲染到哪里的dom元素)
注意点：
(1)react的js代码中可以直接写html标签（不分任何js语句，都可直接嵌套html标签）
(2)react中的变量在标签中使用 一个大括号包裹{ }
<script type="text/babel">
var arr=[10,20,30,40]
//数组元素直接写成html标签
var arr2 = [
<li>list1</li>,
<li>list2</li>,
<li>list3</li>
]
ReactDOM.render(
<ul>
//变量使用{}包裹
{
arr.map((v,index)=>{
return <li key={index}>{v}</li>
})
}
</ul>
,
document.getElementById("example")
)
</script>
二、组件
1、创建组件的两种方式
(1)React.createClass()
render里面的return()：注意这里是()
<script type="text/babel">
//创建组件
var Box = React.createClass({
render(){
return(
<div>
<h1>我是Box组件</h1>
</div>
)
}
})
//调用组件直接写标签即可
ReactDOM.render(
<div>
<Box></Box>
<Box></Box>
</div>
,
document.getElementById("example")
)
</script>
父子组件传递参数：
1>属性名传递，this,props接收
注意接收参数时要加{}
2>给参数设置默认值
在组件内使用方法**getDefaultProps()**设置默认值
或者在组件外使用属性 **defaultProps**设置默认值
<script type="text/babel">
//创建组件
var Box = React.createClass({
//使用方法设置默认值
getDefaultProps(){
return{
user:"李四"
}
}
//渲染组件
render(){
return(
<div>
<h1>接收参数：{this.props.user}</h1>
</div>
)
}
})
//使用属性设置默认值
Box.defaultProps={
user:"王五"
}
//调用组件直接写标签即可
ReactDOM.render(
<div>
<Box user="望穿先生"></Box>
<Box></Box>
</div>
,
document.getElementById("example")
)
</script>
(2)通过构造函数创建组件
class Box extends React.Component{}
构造函数通过方法设置默认值不会自动执行，要加static
class Box extends React.Component{
//设置默认值
static get defaultProps(){
return{
user:"xxx",
tel:"120"
}
}
render(){
return(
<div>
<h1>姓名：{this.props.user}</h1>
<h1>电话：{this.props.tel}</h1>
<hr/>
</div>
)
}
}
2、在组件标签中写常规标签
在组件中通过**this.props.children**接收
<script type="text/babel">
//创建组件
var Box = React.createClass({
//渲染组件
render(){
return(
<div>
//通过.children接收参数
<h1>{this.props.children}</h1>
//也可以对.children进行遍历操作
{
this.props.children.map(v=>{
return <li> {v} </li>
})
}
</div>
)
}
})
//调用组件直接写标签即可
ReactDOM.render(
<div>
<Box>
<em>我是em</em>
<b>我是b标签</b>
</Box>
</div>
,
document.getElementById("example")
)
</script>
3、在组件中调用其他组件
(1)和普通标签一样，通过this.props.children接收
(2)在组件的创建中直接写
//创建组件
var Box = React.createClass({
//渲染组件
render(){
return(
<div>
//直接调用其他组件
<inp><inp>
</div>
)
}
})
4、实现数据的双向绑定(state)
由于创建组件的两种不同方式，实现双向绑定也有对应的两种方式
方法一：构造函数方法
通过state定义变量
**1>**属性要写在constructors中
**2>**要通过super(props)继承props
**3>**设置state的值使用this.setState({})
**4>**在组件中使用state的值要通过this.state.v (要加{ })
**5>**绑定事件onchange
区分之前的绑定事件,react中的事件调用要加{},并且写成箭头函数的形式进行嗲欧总
onChange={()=>this.che()}
**6>**获取dom元素的值，要使用ref属性进行绑定，通过this.refs.myr.value进行取值
/*定义组件*/
class Box extends React.Component{
constructor(props){
super(props);
//设置state中的变量
this.state={
v:1
}
}
che(){
/*设置v的值=input.value*/
this.setState({
v:this.refs.myr.value
})
}
render(){
return(
<div>
<input type="text"
value={this.state.v}
onChange={()=>this.che()}
ref="myr"
/>
<h1>输出：{this.state.v}</h1>
</div>
)
}
}
ReactDOM.render(
<div>
<Box>
</Box>
</div>
,
document.getElementById("example")
)
方法二：React.createClass()
**1>**和构造函数方法只有定义state的方式不同，其他的实现都相同
**2>通过getInitialState()**方法定义state
var Box=React.createClass({
getInitialState(){
return{
v:""
}
},
che(){
this.setState({
v:this.refs.myr.value
})
},
render(){
return(
<div>
<input type="text"
value={this.state.v}
onChange={this.che}
ref="myr"
/>
<h1>输出：{this.state.v}</h1>
</div>
)
}
})
5、组件之间传递函数
同样采用属性名传递参数的方法，通过this.props.fun()(这里的fun是自定义的函数）
举例说明：
//Box组件
var Box=React.createClass({
getInitialState(){
return{
v:""
}
},
mych(m){
this.setState({
v:m
})
},
clearA(){
this.setState({
v:""
})
},
render(){
return(
<div>
<Inp myv={this.state.v} onch={this.mych}></Inp>
<button onClick={this.clearA}>清空</button>
</div>
)
}
})
//Inp组件
var Inp=React.createClass({
che(){
this.props.onch(this.refs.myr.value)
},
render(){
return(
<input type="text"
value={this.props.myv}
onChange={this.che}
ref="myr"
/>
)
}
})
6、组件应用小例子（筛选）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="build/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="build/browser.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
var TabOne=React.createClass({
render(){
return(
<tr>
<td>{this.props.good.name}</td>
<td>{this.props.good.price}</td>
</tr>
)
}
})
var TabTwo=React.createClass({
render(){
return(
<tr>
<td><h3>{this.props.category}</h3></td>
</tr>
)
}
})
var TabAll=React.createClass({
render(){
var list=[];
var searchWord=this.props.searchWord
var goods=this.props.goods
console.log(goods)
var category=""
goods.forEach((v,index)=>{
if(category!=v.category){
list.push(<TabTwo key={category} category={v.category}></TabTwo>)
}
category=v.category;
if(v.name.indexOf(searchWord)==-1){
return
}
list.push(<TabOne key={index} good={v}></TabOne>)
})
return(
<table>
<tbody>
{list}
</tbody>
</table>
)
}
})
var Box=React.createClass({
getInitialState(){
return{
searchWord:""
}
},
mych(m){
this.setState({
searchWord:m
})
},
render(){
return(
<div>
<Inp searchWord={this.state.searchWord} onch={this.mych}></Inp>
<TabAll searchWord={this.state.searchWord} goods={this.props.products}></TabAll>
</div>
)
}
})
var Inp=React.createClass({
che(){
this.props.onch(this.refs.myr.value)
},
render(){
return(
<input type="text"
value={this.props.searchWord}
onChange={this.che}
ref="myr"
/>
)
}
})
var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
ReactDOM.render(
<div>
<Box products={PRODUCTS}>
</Box>
</div>
,
document.getElementById("example")
)
</script>
</body>
</html>
三、React的生命周期
react的生命周期分为哪几个阶段？每个阶段的作用？
分为3个阶段，分别是：
1. Mounting（挂载阶段）——创建构造函数并初始化，让我们在页面加载完成前后做一些事情
2. Updating（运行阶段）——状态更新引起的变化，更新页面UI显示或数据更改
3. Unmounting（卸载阶段）——销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理，
比如组件销毁后，也要将组件的定时器销毁，减少内存占用
react各阶段事件节点有哪些？
挂载阶段
\1. componentWillMount()-组件将要加载，但还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
\2. componentDidMount()-组件加载完成
运行阶段
\1. componentWillUpdate(nextProps,nextState)-组件将要更新
\2. componentDidUpdate(nextProps,propsState)-组件更新完成
卸载阶段
\1. componentWillUnmount()-组件将要被销毁
还有2个比较特殊的
\1. componentWillReceiveProps(nextProps)-接收父组件传递过来的参数props时触发
\2. shouldComponentUpdate()-判断组件是否需要更新, 它需要一个返回值，默认为true，若为false则组件不更新
react整个生命周期加载的过程
创建构造函数constructor并初始化，然后执行componentWillMount()将要加载，接着render()出来, 最后componentDidMount()加载完成
react更新的过程
首先执行shouldComponentUpdate(), 看返回值是不是true，如果是true则继续执行componentWillUpdate()将要更新，然后
render()，最后更新完毕componentDidUpdate()；若返回值为false，则组件不会更新。 如果是组件传值引起的数据改变，
需要在shouldComponentUpdate()执行前先执行componentWillReceiveProps()来接收父组件传递过来的值
数字切换小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="build/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="build/browser.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
var Box=React.createClass({
getInitialState(){
return {
c:0,
op:1
}
},
//当挂载完成
componentDidMount(){
var that=this;
setInterval(function(){
var p=that.state.op-0.02;
if(p<=0){
p=1
}
that.setState({
op:p
})
},40)
setInterval(function(){
that.setState({
c:that.state.c+1
})
},2000)
},
render(){
return(
<div>
<h1 style={{opacity:this.state.op}}>{this.state.c}</h1>
</div>
)
}
})
ReactDOM.render(
<div>
<Box>
</Box>
</div>
,
document.getElementById("example")
)
</script>
</body>
</html>
四、React例子
https://react.rocks/
是react自己的一些写好的小例子
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
