1. 循环
- 在实际应用中 数据展示 是最基本的功能。
- React中使用的map（）进行列表的渲染
<script src="js/react.16.8.6.js"></script>
<script src="js/react-dom.16.8.6.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
class MyCom extends React.Component{
constructor(props){
super(props)
this.state={
arr:["aa","bb","cc","dd","ee",],
obj:[
{name:"mgd1",age:16},
{name:"mgd2",age:17},
{name:"mgd3",age:18},
{name:"mgd4",age:19}
]
}
}
render(){
//开始遍历arr
var demohtml = this.state.arr.map((v,i)=>{
return (
<li>
{v}+++++++++{this.state.arr[i]}
</li>
)
})
//开始遍历obj
var newhtml=this.state.obj.map((v,i)=>{
return (
<tr>
<td>{v.name}</td>
<td>{v.age}</td>
</tr>
)
})
return (
<div>
<ul>
{demohtml}
</ul>
<table border='1'>
<tbody>
{newhtml}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>
1.1 Keys
- Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此要给数组中的每一个元素赋予一个确定的标识。
2. 一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串
<li key={i}>
{v}+++++++++{this.state.arr[i]}
</li>
<tr key={i}>
<td>{v.name}</td>
<td>{v.age}</td>
</tr>
练手demo:
<script type="text/babel">
class MyCom extends React.Component{
constructor(props){
super(props)
this.state={
inputa:"",
inputb:"",
obj:[
{name:"mgd1",age:20},
{name:"mgd2",age:19}
]
}
}
fun=(e)=>{
// console.log("aaaaaaa")
this.setState({
inputa:e.target.value
})
}
funb=(e)=>{
// console.log("bbbbbbbb")
this.setState({
inputb:e.target.value
})
}
func(){
var newobj=this.state.obj;
//把两个输入框的插入到数组对象中
this.setState({
obj:[...newobj,{name:this.state.inputa,age:this.state.inputb}]
})
}
render(){
//开始遍历数据
var newhtml=this.state.obj.map((v,i)=>{
return (
<tr key={i}>
<td>{v.name}</td>
<td>{v.age}</td>
</tr>
)
})
return (
<div>
<input type="text" onChange={this.fun}/>
<input type="text" onChange={this.funb}/>
<button onClick={this.func.bind(this)}>点我添加</button>
<table border="1">
<tbody>
{newhtml}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>
1.2 传递参数
向事件处理函数中传递参数。
- 方式1：通过 bind 的方式进行传递
<button onClick={this.fun.bind(this,"hahah")}>点我传递参数</button>
- 方式2：通过箭头函数传递。注意使用箭头函数调用事件对象必须显式的进行传递
<button onClick={()=>this.funa("呵呵")}>点我传递参数</button>
1.3 阻止默认行为
React中阻止默认行为使用preventDefault()；
1.4 修改this指向
- 方式1：通过bind方法进行原地绑定，从而改变this指向
- 方式2：通过创建箭头函数
- 方式3：在constructor中提前对事件进行绑定
- 方式4：将事件调用的写法改为箭头函数的形式
<script type="text/babel">
class MyCom extends React.Component{
constructor(props){
super(props)
this.state={
text:"我是数据111"
}
//绑定this第三种方式
this.func=this.func.bind(this)
}
fun(){
console.log("我是第一种bind方式绑定" +this.state.text);
}
funb=()=>{
console.log("我是第二种箭头函数方式绑定" +this.state.text);
}
func(){
console.log("我是第三种在constructor中提前对事件进行绑定" +this.state.text);
}
fund(){
console.log("我是第四种调用函数的时候使用箭头函数的方式绑定" +this.state.text);
}
render(){
return (
<div>
<p>方式1：通过bind方法进行原地绑定，从而改变this指向</p>
<button onClick={this.fun.bind(this)}>点我</button>
<p>方式2：通过创建箭头函数</p>
<button onClick={this.funb}>点我</button>
<p>方式3：在constructor中提前对事件进行绑定</p>
{/*
1.创建函数
2.在构造函数中进行绑定
3.调用
*/}
<button onClick={this.func}>点我</button>
<p>方式4：将事件调用的写法改为箭头函数的形式</p>
<button onClick={()=>{this.fund()}}>点我</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>
2. Refs 转发
2.1 ref属性
- React提供的这个ref属性(不能在函数式组件上使用ref属性，因为它们没有实例)表示为对组件真正实例的引用其实就是ReactDOM.render()返回的组件实例
- ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。
- 一句话总结：==标识组件内部的
2.2 使用
React的ref有3种用法：
- 字符串(官方不推荐使用)
- 回调函数
- React.createRef() （React16.3提供）
- 使用字符串
最早的ref用法。使用this.refs.xxx来进行访问 - 使用回调函数
回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。 - 使用React.createRef()
在React16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上该ref的current属性将能拿到dom节点或组件的实例
<script type="text/babel">
class MyCom extends React.Component{
constructor(props){
super(props)
this.fun=this.fun.bind(this)
this.myref=React.createRef()
}
fun(){
this.refs.red.style.color="red";
}
funb(){
this.haha.style.color="blue";
}
func(){
this.myref.current.style.color="green";
}
render(){
return (
<div>
<h1>refs第一种方式</h1>
<p ref="red">测试refs转发字符串方式的内容</p>
<button onClick={this.fun}>点我改变颜色</button>
<br/>
<h1>refs第二种方式</h1>
<em ref={(aa)=>{this.haha=aa}}>我是第二种方式测试demo</em>
<button onClick={()=>{this.funb()}}>点我改变颜色</button>
<br/>
<h1>refs第三种方式: 1. 构造中创建 2.引用 3. 调用</h1>
<p ref={this.myref}>我是用来测试第三种方式的</p>
<button onClick={this.func.bind(this)}>点我改变颜色</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>
2.3 官方建议
勿过度使用 Refs在对逻辑进行处理的时候尽量优先考虑state
3. React 表单
React负责渲染表单的组件。同时仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为==“受控组件”==。
4. React组件生命周期
4.1 React 生命周期分为三种状态：
- 初始化 ：组件生命周期函数一辈子只执行一次
- 运行/更新： 根据组件 state 跟 props 的改变，有选择性的触发0次或者多次
- 销毁 ： 一辈子只执行一次
4.2 生命周期的方法有：
- componentWillMount 组件将要被挂载，此时还没有开始渲染虚拟 DOM（相对于 Vue 中的 created）
- componentDidMount 组件完成挂载，此时，组件已经显示到页面上了（相对于 Vue 中的mounted）
- componentWillReceiveProps 组件的props接收到值后调用，第一次不调用
- shouldComponentUpdate 判定组件是否要更新html
- componentWillUpdate组件即将更新html时候调用
- componentDidUpdate 在组件完成更新后立即调用。
- componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
4.3 销毁组件的方式：
ReactDOM.unmountComponentAtNode(document.getElementById("demodiv"));
钩子函数demo
<script type="text/babel">
class MyCom extends React.Component{
constructor(props){
super(props)
this.state={
text:'我是默认的数据'
}
this.funb=this.funb.bind(this)
}
componentWillMount() {
console.log("组件将要被挂载，此时还没有开始渲染虚拟 DOM（相对于 Vue 中的 created）")
}
componentDidMount() {
console.log("组件完成挂载，此时，组件已经显示到页面上了（相对于 Vue 中的mounted）")
}
componentWillReceiveProps(nextProps) {
console.log("组件的props接收到值后调用，第一次不调用")
}
shouldComponentUpdate(nextProps, nextState) {
console.log(" 判定组件是否要更新html???如果使用到了判断是否更新的钩子，那么必须在内部设置返回值 true是更新 false是不更新")
return true
}
componentWillUpdate(nextProps, nextState) {
console.log("组件即将更新html时候调用")
}
componentDidUpdate(prevProps, prevState) {
console.log("在组件完成更新后立即调用")
}
componentWillMount() {
console.log("销毁了")
}
fun(data){
this.setState({
text:data
})
}
funb(){
ReactDOM.unmountComponentAtNode(document.getElementById("demodiv"));
}
render(){
return (
<div>
<p>我是测试生命周期钩子{this.state.text}</p>
<button onClick={this.fun.bind(this,"我是修改的数据hahahahhah")}>点我更新</button>
<button onClick={this.funb}>点我销毁</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>
5. React条件渲染
5.1 条件渲染
- 开发中，创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
- React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。
5.1.1if 语句
在React中使用if语句条件渲染是最简单的，但是注意jsx中不允许有if
<script type="text/babel">
class Demoa extends React.Component{
render(){
return (
<div>
我是a组件
</div>
)
}
}
class Demob extends React.Component{
render(){
return (
<div>
我是b组件
</div>
)
}
}
class MyCom extends React.Component{
constructor(props){
super(props)
this.fun=this.fun.bind(this)
this.state={
bool:true
}
}
fun(){
var newbool=!this.state.bool;
this.setState({
bool:newbool
})
console.log(this.state.bool)
}
render(){
// 由于jsx中不能使用if，所以在外面写
var com;
if(this.state.bool){
com=<Demoa/>
}else{
com=<Demob/>
}
return (
<div>
{com}
<button onClick={this.fun}>点击控制显示</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>
5.1.2 三目运算符
条件渲染的另一种方法是使用 JavaScript 的条件运算符:
render(){
return (
<div>
{this.state.bool?<Demoa/>:<Demob/>}
<button onClick={this.fun}>点击控制显示</button>
</div>
)
}
5.1.3 &&
条件渲染的另一种方法是使用 JavaScript 的条件运算符&& 但是注意该种方法只能渲染一个组件
render(){
return (
<div>
{/* 使用三元运算符，但是只能控制一个显示 */}
{this.state.bool==true&&<Demoa/>}
<button onClick={this.fun}>点击控制显示</button>
</div>
)
}
扫一扫
4198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
