零:组件的样式
/*
设置组件的样式,3种:
1,内联样式
2,对象样式
3,选择器样式
注意:在React和HTML5中设置样式时的书写格式是有区别的
**1,HTML5以;结尾
React以,结尾
**2,HTML5中key,value都不加引号
React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法,如果value为字符串,需要加引号.
**3,HTML中,value如果是数字,需要带单位
React中不需要带单位
*我们定义一个组件类,同时使用三种设置组件样式的方式
*需求:定义一个组件,分为上下两行显示内容
*<div> 内联样式:设置背景颜色,边框大小,边框颜色
* <h1></h1
> 对象样式:设置背景颜色,字体颜色
* <p></p> 选择器样式:设置字体大小
*</div>
****注意:在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换,
类似:使用htmlFor替换for
*/
一:复合组件
也叫组合组件,创建多个组件合成一个组件
也叫组合组件,创建多个组件合成一个组件
/*
需求:定义一个组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接.
分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击
*/
//定义WebName组件
var WebName = React.creatClass({
render:function() {
return <h1>蓝鸥科技</h1>
}
});
//定义WebLink组件
var WebLink = React.createClass({
render:function() {
return <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
}
});
//定义WebShow组件
var WebShow = React.creatClass({
render: function() {
return (
<div>
<WebName />
<WebLink />
</div>
);
}
});
//渲染组件
ReactDOM.render(
<WebShow />,
document.getElementById("container")
);
二:props(一个属性对象)
/*
React可以看成MVC中的View层,一般与数据层无关,但是
组件的两个属性和数据有关,(1)props(2)state
props是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常是由父层组件向子层组件传递)
注意:props对象中的属性与组件的属性一一对应,不要直接去修改props中属性的值.
*/
/*
需求:定义一个组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接.
分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击
思路:
1,给WebShow设置两个属性,wname,wlink
2,WebShow的props对象增加了两个属性值
3,WebName从WebShow的props对象中获取wname的值,即网站的名称
4,WebLink同理
*/
//定义WebName
var WebName = React.creatClass({
render:function() {
return <h1>{this.props.webname}</h1>
}
});
//定义WebLink
var WebLink = React.createClass({
render:function() {
return <a href=
{this.props.weblink}
>{this.props.weblink}</a>
}
});
//定义Webshow
var WebShow = React.creatClass({
render: function() {
return (
<div>
<WebName webname={this.props.wname} />
<WebLink weblink={this.props.wlink}/>
</div>
);
}
});
//渲染
ReactDOM.render(
<WebShow wname="蓝鸥科技" wlink="
http://www.lanou3g.com"/>,
document.getElementById("container")
);
/*
...this.props
props提供的语法糖,可以将父组件中的全部属性都复制给子组件
需求:定义一个组件Link,Link组件中只包含一个<a>,我们不给<a>设置任何属性,所有属性圈住从父组件复制得到
*/
var Link = React.createClass({
render: function() {
return <a {...this.props}>{this.props.name}</a>
}
});
ReactDOM.render(
<Link href="
http://www.lanou3g.com" name="蓝鸥科技" />,
document.getElementById("container")
);
三:children
/*
this,props.children
children是一个例外,不是跟组件的属性对应的.
表示组件的所有子节点
HTML中有在一种标签:列表<ul><ol><li>
定义一个列表组件,列表项中现实的内容,以及列表项的数量都由外部决定
*/
var ListComponent = React.creatClass({
render:function(){
return (
<ul>
{
/*
列表项数量以及内容不确定,在创建模板时才能确定
利用this.props.children从父组件中获取需要展示的列表项内容
获取列表项内容后,需要遍历children,逐项进行设置
使用React.Children.map方法
返回值:数组对象,这里数组中的元素是<li>
*/
React.Children.map(this.props.children,function(children){
//children是遍历得到的父组件的子节点
return <li>{children}<li/>
})
}
</ul>
);
}
});
ReactDOM.render(
(
<ListComponent>
<h1>蓝鸥科技</h1>
<a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
</ListComponent>
),
document.getElementById("container")
);
四:属性验证
/*
propTypes
组件类的属性
用于验证组件实例的属性是否符合要求
*/
var ShowTitle = React.creatClass({
propTypes:{
//title数组类型必须为字符串
title:React.PropTypes.String.isRequired
},
render: function() {
return <h1>{this.props.title}</h1>
}
}
);
ReactDOM.render{
<ShowTitle title="123"/>,
document.getElementById("container")
};
/*
设置组件属性的默认值
通过实现组件的getDefaultProps方法,对属性设置默认值
*/
var MyTitle = React.createClass({
getDefaultProps:function() {
return {
title:"蓝鸥"
};
},
render:function() {
return <h1>{this.props.title}</h1>
}
});
ReactDOM.render(
<MyTitle />,
document.getElementById("container")
);
五:state
/*
事件处理
react中的事件名称,首字母小写,驼峰命名法
案例:定义一个组件,组件中包含一个button,给button绑定onclick事件
*/
var MyButton = React.createClass({
handleClick:function() {
alert("点击按钮触发的效果");
},
render:function(){
return (
<button onClick={this.handleClick}>{this.props.buttonTitle}</button>
);
}
});
ReactDOM.render(
<MyButton buttonTitle="按钮" />,
document.getElementById("container")
);
/*
state 状态
props
组件自身的属性
this.state
*/
//需求:创建一个CheckButton的组件,包含一个Checkbox类型<input>
//复选框在选中和未选中两种状态下会显示不同的文字,即根据状态渲染
var CheckButton = React.createClass({
//定义初始状态
getInitialState: function() {
return {
//在这个对象中设置的属性,将会存储在state中
//默认:未选中
isCheck:false
}
},
//定义事件绑定的方法
handleChange: function() {
//修改状态值,通过this.state读取设置的状态值
this.setState({
isCheck:!this.state.isCheck
});
}
,
render: function() {
//根据状态值设置显示的文字
//在jsx语法中,不能直接使用if,使用三目运算符
var text = this.state.isCheck ? "已选中" : "未选中";
return (
<div>
<input type="checkbox" onChange={this.handleChange} />
<text>
</div>
)
;
}
});
ReactDOM.render(
<CheckButton />,
document.getElementById("container")
);
//当state发生变化时,会调用组件内部的render方法.
六:表单
/*
需求:定义一个组件,将用户在输入框内输入的内容进行实时显示
分析:组件与用户交互过程中,存在状态的变化,即输入框的值
*/
var Input = React.createClass({
getInitialState: function() {
return {
value:"请输入"
};
},
handleChange: function(event) {
//通过event.target.value读取用户输入的值
this.setState({
value:event.target.value
});
},
render: function() {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(
<Input />,
document.getElementById("container")
);
七:组件的生命周期
/*
生命周期:
1,组件生命周期三个状态:
Mounting:组件挂载,已插入真实 DOM
Updating:组件更新,正在被重新渲染
Unmounting:组件移出,已移出真实 DOM
2,组件的生命周期四个阶段
创建,实例化,更新,销毁
*/
/*
1,Mounting/组件挂载相关:|
(1)componentWillMount
组件将要挂载,在render之前执行,但只执行一次,即使多次重复渲染该组件,或者改变了组件的state
(2)componentDidMount
组件已经挂载,在render之后执行,同一个组件重复渲染只执行一次
2,Updating/组件更新相关
(1)componentWillReceiveProps(object nextProps)
已加载组件收到新的props之前调用,注意组件初始化渲染时则不会执行
(2)shouldComponentUpdate(object nextProps,object nextState)
组件判断是否重新渲染时调用,该接口实际是在组件接收到了新的props或者新的state的时候会立即调用,然后通过
(3)componentWillUpdate(object nextProps,object nextState)
组件将要更新
(4)componentDidUpdate(object prevProps,object prevState)
组件已经更新
3,Unmounting/组件移除相关:
(1)componentWillUnmount
在组件要被移除之前的时间点触发,可以利用该方法来执行一些必要的清理组件将要移除
4,生命周期中与props和state相关:
(1)getDefaultProps 设置props属性默认值
(2)getInitialState 升值state属性初始值
*/
/*
生命周期各阶段介绍
*/
var Demo = React.creatClass({
/*
一:创建阶段
流程:
只调用getDefaultProps方法
*/
getDefaultProps: function() {
//在创建类的时候被调用,设置this.props的默认值
console.log("getDefaultProps");
return {};
}
,
/*
二:实例化阶段
流程:
getInitlalState
getInitlalState
componentWillMount
render
componentDidMount
*/
getInitlalState: function() {
//设置this.state的默认值
console.log("
getInitlalState
");
return nll;
},
componentWillMount: function(){
//在render之前调用
console.log("
componentWillMount
");
},
render: function() {
//渲染并返回一个虚拟DOM
console.log("render");
return <div>Hello React</div>
},
componentDidMount: function(){
//在render之后调用
//在该方法中,React会使用render方法返回的虚拟DOM对象创建真实的DOM结构
//可以在这个方法中读取DOM节点
console.log("
componentDidMount
");
},
/*
三:更新阶段
流程:
componentWillReceiveProps
shouldComponentUpdate 如果返回值是false,后三个方法不执行
componentWillUpdate
render
componentDidUpdate
*/
componentWillReceiveProps: function() {
console.log("
componentWillReceiveProps
");
},
shouldComponentUpdate
: function() {
console.log("
shouldComponentUpdate
");
return true;
},
componentWillUpdate
: function() {
console.log("
componentWillUpdate
");
},
componentDidUpdate: function() {
console.log("
componentDidUpdate
");
},
/*
销毁阶段
流程:
componentWillUnmount
*/
componentWillUnmount: function() {
console.log("
componentWillUnmount
");
},
});
//第一次创建并加载组件
ReactDOM.render(
<Demo />,
document.getElementById("container")
);
//重新渲染组件(相当于进行更新组件)
ReactDOM.render(
<Demo />,
document.getElementById("container")
);
//移除组件
ReactDOM.unmpuntComponentAtNode(document.getElementById("container"));