您好,登录后才能下订单哦!
目录
React:... 1
props:... 1
constructor,构造器:... 3
组件的生命周期:... 4
props(properties)是公有public属性,组件外可以访问,但只读,修改会报错Uncaught TypeError: Cannot assign to read only property 'schoolName' of #<Object>;
state是private私有属性,组件外无法直接访问,可修改state,但建议使用setState方法;
import React from "react";
import ReactDom from 'react-dom';
class Toggle extends React.Component {
state = {
flag: true
};
handleClick(event) {
// console.log(event);
// console.log(event.target);
// console.log(event.target.id);
// console.log(event.target === this);
// console.log(this);
// console.log(this.state);
let x = event.target;
alert("触发的元素的id是:" + x.id);
this.setState({flag:!this.state.flag});
// this.props.schoolName='www.magedu'; //不允许修改,Uncaught TypeError: Cannot assign to read only property 'schoolName' of #<Object>
}
render() {
let text = this.state.flag?'true':'flase';
return (<div id='t1' onClick={this.handleClick.bind(this)}>
{this.props.schoolName} 点击这句话,会触发一个事件,并弹出一个警示框<br />
flag = {text}
{console.log(this.props.parent)} //可操作parent里的所有属性和方法,即在Toggle内部可操作所有对象
{/* {this.props.parent={}} */} //不可修改,若为{this.props.setState(...)}这是可以的,schoolName、this不能改,类似const a=100;,类似py中元组中的引用类型,如const a=Obj;,Obj这个对象不能动,但对象内部的属性可随时改
{this.props.children}
</div>);
}
}
class Root extends React.Component {
render() {
return (<div>
my first test<hr />
{/* <Toggle schoolName='magedu' parent={this}/> */} //通过属性传入数据到props,由外向内传递,常用此种,parent={this},this即为Root
<Toggle schoolName='magedu' parent={this}> //用<Toggle></Toggle>这样定义,可定义子元素,很少用,使用时在Toggle类的render里this.pros.children
<hr /> {/*//通过子元素传递数据 */} //注释表达式,表达式只能一行
<div>我是Toggle的子元素</div> //通过子元素传入数据到props的children
</Toggle>
</div>);
}
}
ReactDom.render(<Root />, document.getElementById('root'));
使用ES6的构造器,要提供一个参数props,并把这个参数使用super传递给父类;
class Toggle extends React.Component {
constructor(props) {
console.log(props);
super(props);
this.state = {
flag:true
}
}
// constructor(...props) {
// console.log(props);
// super(...props);
// this.state = {
// flag:true
// };
// }
分为三个状态:
mounting,已插入真实的dom;
updating,正在被重新渲染;
unmounting,已移出真实dom;
组件的生命周期状态,在不同时机访问组件,组件正处在生命周期的不同状态上,在不同的生命周期状态访问,就产生不同的方法;
注:
constructor是最早执行的函数;
生命周期的方法:
大多数时候,用不到这些函数,这些钩子函数是为了精确地控制;
装载组件触发:
componentWillMount,在渲染前调用,在客户端也在服务端,只会在装载之前调用一次;第1次装载,在首次render之前,如控制state、props;
componentDidMount,在第一次渲染后调用,只在客户端,之后组件已生成了对应的dom结构,可通过this.getDomNode()来进行访问,如果想和其它js框架一起使用,可在这个方法中调用setTimeout、setInterval或发送ajax请求等操作(防止异步操作阻塞ui),只在装载完成后调用一次,在render之后;第1次装载结束,在首次render之后,如控制state、props;
更新组件触发:
这些方法不会在首次render组件的周期调用;
componentWillReceiveProps(nextProps),在组件接收到一个新的props时被调用,此方法在初始化render时不会被调用;在组件内部,props是只读不变的,但是这个函数可接收到新的props,可对props作一些处理,this.props={name:'rooooot'},这就是偷梁换柱,componentWillReceiveProps触发,也会走shouldComponentUpdate;
shouldComponentUpdate(nextProps,nextState),返回一个布尔值,在组件接收到新的props或state时被调用,在初始化时或使用forceUpdate时不被调用;可在确认不需要更新组件时使用;若设置为false,就是不允许更新组件,那componentWillUpdate、componentDidUpdate不会执行;判断是否需要组件更新,就是是否render,精确地控制渲染,提高性能;
componentWillUpdate(nextPropx,nextState),在组件接收到新的props或state,但还没有render时被调用,在初始化时不会被调用;在除了首次render外,每次render前执行,componentDidUpdate在render之后调用;
componetDidUpdate(nextProps,nextState),在组件完成更新后立即调用,不初始化时不会被调用;
卸载组件触发:
componentWillUnmount,在组件从dom中移除时立刻被调用;
例:
构造2个组件,在子组件Sub中加入所有生命周期函数;
import React from 'react';
import Reactdom from 'react-dom';
class Sub extends React.Component {
constructor(props) {
console.log(props);
super(props);
this.state = {count:0};
}
handleClick(event) {
this.setState({count: this.state.count + 1});
}
render() {
console.log('Sub render');
return (<div id='sub' onClick={this.handleClick.bind(this)}>
Sub's count = {this.state.count}
</div>);
}
componentWillMount() { //constructor之后,第1次render之前
console.log('Sub componentWillMount');
}
componentDidMount() { //第1次render之后
console.log('Sub componentDidMount');
}
componentWillUnmount() { //清理工作
console.log('Sub componentWillUnmount');
}
}
class Root extends React.Component {
constructor(props) {
super(props);
console.log('Root construtor');
this.state = {};
}
render() {
return (<div>
<Sub />
</div>);
}
}
Reactdom.render(<Root />, document.getElementById('root'));
例,增加更新组件函数:
import React from 'react';
import Reactdom from 'react-dom';
class Sub extends React.Component {
constructor(props) {
console.log(props);
super(props);
this.state = {count:0};
}
handleClick(event) {
this.setState({count: this.state.count + 1});
}
render() {
console.log('Sub render');
return (<div id='sub' onClick={this.handleClick.bind(this)}>
Sub's count = {this.state.count}
</div>);
}
componentWillMount() { //第1次render之前
console.log('Sub componentWillMount');
}
componentDidMount() { //第1次render之后
console.log('Sub componentDidMount');
}
componentWillReceiveProps(nextProps) { //props变更时接到新props了,交给shouldComponentUpdate;props组件内只读,只能从外部改变
console.log(this.props);
console.log(nextProps);
console.log('Sub componentWillReceiveProps', this.state.count);
}
shouldComponentUpdate(nextProps, nextState) { //是否组件更新,props或state发生改变时,返回布尔值,true才会更新
console.log('Sub shouldComponentUpdate', this.state.count, nextState);
return true; //return false将拦截更新
}
componentWillUpdate(nextProps, nextState) { //同意更新后,真正更新值,之后调用render
console.log('Sub componentWillUpdate', this.state.count, nextState);
}
componentDidUpdate(prevProps, prevState) { //同意更新后,真正更新后,在render之后调用
console.log('Sub componentDidUpdate', this.state.count, prevState);
}
componentWillUnmount() { //清理工作
console.log('Sub componentWillUnmount');
}
}
class Root extends React.Component {
constructor(props) {
super(props);
console.log('Root construtor');
this.state = {
flag:true,
name:'root'
};
}
handleClick(event) {
this.setState({
flag: !this.state.flag,
name:this.state.flag?this.state.name.toLowerCase():this.state.name.toUpperCase()
});
}
render() {
return (<div id='root' onClick={this.handleClick.bind(this)}>
my name is {this.state.name} <hr />
<Sub /> //父组件的render,会引起下一级组件的更新,导致props重新发送,即使子组件props没有改变过
</div>);
}
}
Reactdom.render(<Root />, document.getElementById('root'));
调整浏览器窗口,会引起重绘;
也叫函数式组件;
组件,默认是有状态组件;
React从15.0开始支持无状态组件;
开发中,很多情况下,组件不需要state状态,也不需要生命周期函数,无状态组件很好地满足了需要;
无状态组件函数应提供一个参数props,返回一个React元素;
无状态组件函数本身就是一个render函数;
例:
import React from 'react';
import ReactDom from 'react-dom';
// function Root(props) {
// return (<div>
// my name is {props.name}
// </div>)
// }
let Root = props => <div>my name is {props.name}</div>; //箭头函数形式
ReactDom.render(<Root name='magedu'/>, document.getElementById('root'));
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。