♥React
上期 戳这里~
一.无状态组件
顾名思义就是组件内部没有(不需要)state,无状态组件也可以理解为展示组件,仅做展示用,可以根据外部传来的props来渲染模板的内容,内部没有数据。
//无状态组件:组件内部没有state,可以使用函数式组件。它只负责展示
let Book = (props) => (
<div>
<p>书名:{props.name}</p>
<p>作者:{props.author}</p>
</div>
);
仅仅只是一个函数,就ok了。
二.有状态组件
有状态组件就是不但外部可以传入,内部也有state。
有状态组件也可以理解为容器组件,用来容纳展示组件,在容器组件里处理数据的逻辑,把结果在展示组件里呈现。
创建有状态组件如下:
// 有状态组件:有state,负责数据的处理。
class Books extends React.Component {//容器组件
constructor(props) {
super();
this.state = {
bookList: [
{
name: "三国",
author: "罗贯中",
},
{
name: "哆啦A梦",
author: "哈哈哈",
},
{
name: "皮卡丘",
author: "xixi",
},
],
};
}
render() {
return(
<div>
<h1>书籍列表</h1>
<ul>
{/*Book为展示组件*/}
{this.state.bookList.map((item,index) => (
<Book name={item.name} author={item.author} key={index}/>
))}
</ul>
</div>
);
}
}
ReactDOM.render(
<div>
<Books />
</div>,
document.getElementById("box")
);
注意:
做项目时,经常会把有状态组件和无状态组件进行结合使用。
1)、 有状态组件:一般会使用类组件,处理数据的业务逻辑,包括和后端进行交互,获取数据。把数据传给无状态组件
2)、 无状态组件:一般会使用函数式组件,只做展示用,没有自己的数据,会接收有状态组件传来的数据。
三. 事件处理
3.1事件特点:
1、React 事件绑定属性的命名采用驼峰式写法,而不是小写。如:onClick。
2、如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法)
3、在 React 中另一个不同的是,不能使用return false 的方式阻止默认行为, 你必须使用 preventDefault。
4、事件处理函数里的this是undefined(啊………),如果希望事件处理函数里的this是React组件对象本身,则需要用bind。
3.2 事件语法
3.2.1格式
<JSX元素 onClick={this.实例方法|函数体} />
示例:
class Books extends React.Component {
constructor(props) {
super();
}
fn(){
console.log("点击了~");
}
render() {
return(
<div>
<input type="button" value="测试" onClick={this.fn}/>
</div>
);
}
}
ReactDOM.render(
<div>
<Books />
</div>,
document.getElementById("box")
);
重点来袭~
3.2.2事件处理函数里的this
事件处理函数里的this是undefined,如何让事件处理函数里的this是React组件对象本身
- 使用bind
1)、构造器(构造函数)里:this.方法=this.方法.bind(this)
2)、在事件绑定时写,onClick={this.方法.bind(this)}
class Books extends React.Component {
constructor(props) {
super();
// 1、使用bind,让事件处理函数了的this是react组件对象。bind不会调用函数,会绑定该函数,返回一个新的函数。
// this.fn02 = this.fn01.bind(this);
this.fn01=this.fn01.bind(this);
}
fn01(){
console.log("点击了~");
console.log("this",this);
}
render() {
return(
<div>
<input type="button" value="测试01" onClick={this.fn01}/>
{/*直接使用bind*/}
<input type="button" value="测试02" onClick={this.fn01.bind(this)}/>
</div>
);
}
}
ReactDOM.render(
<div>
<Books />
</div>,
document.getElementById("box")
);
- 使用箭头函数
1)、事件绑定时,使用箭头函数:onClick={()=>this.方法()}
class Books extends React.Component {
constructor(props) {
super();
fn01(){
console.log("点击了~");
console.log("this",this);
}
render() {
return (
<div>
<input type="button" value="测试03" onClick={()=>this.fn01()}/>
</div>
);
}
}
ReactDOM.render(
<div>
<Books />
</div>,
document.getElementById("box")
);
2)、定义方法时,直接使用箭头函数: 方法=()=>{箭头函数定义方法}
class Books extends React.Component {
constructor(props) {
super();
// 4、定义方法时,使用箭头函数
fn04 = () => {
console.log("点击了~");
console.log("this", this);
};
render() {
return (
<div>
<input type="button" value="测试04" onClick={this.fn04} />
</div>
);
}
}
ReactDOM.render(
<div>
<Books />
</div>,
document.getElementById("box")
);
3.2.3事件对象
event对象是经过react处理过的。
如何获取事件对象------直接声明即可。
实例方法(ev) ev 代理事件对象 ,ev.target 返回虚拟Vdom
事件对象的获取:
1)、直接声明(没有其它参数的情况下)
//无其他参数
fn01 = (ev) => {
console.log("ev", ev);
// 真实DOM
console.log("ev.target", ev.target);
};
<input type="button" value="测试01" onClick={this.fn01} />
2)、箭头函数里直接声明(有其它参数的情况下)
// 有其他参数
// 注意:这已经不是事件处理函数了
fn02 = (ev, str) => {
console.log("ev", ev);
console.log("ev.target", ev.target);
console.log("str", str);
console.log("this", this);
};
//注意:给onClick绑定的函数,还是只有一个参数,这个参数就是事件对象,此处在绑定的函数里再调用另外一个函数进行传参
<input
type="button"
value="测试02"
onClick={(ev) => this.fn02(ev, "hi")}
/>
注意:给事件属性绑定的函数,永远只会有一个参数,该参数就是事件对象。
3.2.4阻止浏览器的默认行为:
只能用preventDefault,不能在事件函数里使用return false。
原封不懂得输入到大脑就好啦~简单!
四.组件的内容 :children
组件的内容,使用 children属性获取
class Books extends React.Component {
constructor(props) {
super();
}
render() {
return (
<div>
<p>我是上面的片</p>
{this.props.children}
<p>我是下面的片</p>
</div>
);
}
}
ReactDOM.render(
<div>
<Books>
<h1>我是组件之间的内容</h1>
</Books>
</div>,
document.getElementById("box")
);
五.refs
5.1获取DOM
表示对组件真正实例(也就是html标签,也就是DOM对象)的引用,其实就是ReactDOM.render()返回的组件实例;ref可以写在html标签里,也可以写在组件(自定义标签里),和vue的ref是同样的意思。
官方建议: 勿过度使用 Refs(尽量不要操作DOM),在对逻辑进行处理的时候尽量优先考虑state(数据驱动)
5.2用法
1). 赋值为 字符串(官方不推荐使用)
class Books extends React.Component {
constructor(props) {
super();
}
fn01 = () => {
this.refs.username.value = "hhh";
};
render() {
return (
<div>
{/*赋值为字符串*/}
<input type="text" ref="username" />
<input type="button" value="测试01" onClick={this.fn01} /><br/>
</div>
);
}
}
ReactDOM.render(
<div>
<Books></Books>
</div>,
document.getElementById("box")
);
2). 赋值为 回调函数
当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。
ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
//ref的值赋成回调函数时,回调的参数就是当前dom元素。
// callback refs 回调
<jsx ref={el => this.定义一个实例属性 = el} //el就是dom对象
this.定义一个实例属性 //后期用作访问jsx元素
//当组件挂载时,将 DOM el元素传递给 ref 的回调
//当组件卸载时,则会传递 null。
//ref 回调会在 componentDidMount 和 componentDidUpdate 生命周期之前调用
如:
<input type=“text” ref={(currDom) => this.input1 = currDom} />
<input type=“text” ref={(currDom) => this.input2 = currDom} />
class Books extends React.Component {
constructor(props) {
super();
this.ipt=null;
}
fn02=()=>{
this.ipt.value = "啦啦啦";
}
render() {
return (
<div>
<input type="text" ref={el=>this.ipt=el}/>
<input type="button" value="测试02" onClick={this.fn02}/>
</div>
);
}
}
ReactDOM.render(
<div>
<Books></Books>
</div>,
document.getElementById("box")
);
3). React.createRef() (React16.3提供)
使用此方法来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性将能拿到dom节点或组件的实例。
//1、在构造函数里
// 实例化
this.firstRef = React.createRef() //发生在构造器
//2、挂载在ref属性上
//3、获取dom原始
this.firstRef.current //current是官方的属性
class Books extends React.Component {
constructor(props) {
super();
this.firstRef = React.createRef(); //发生在构造器
}
fn03=()=>{
console.log(this.firstRef.current);
}
render() {
return (
<div>
{/* React.createRef() (React16.3提供) */}
<input type="text" ref={this.firstRef} />
<input type="button" value="测试03" onClick={this.fn03} />
</div>
);
}
}
ReactDOM.render(
<div>
<Books></Books>
</div>,
document.getElementById("box")
);