react函数式组件
1.函数式组件
特点：简单（开发，维护起来都比较简单），快（需要处理的内容少，渲染起来比较快）；没有自己的状态（state），没有生命周期；只有属性props，所以也叫静态组件
- 通过形参props接收父组件传过来的参数，props是个对象，里面存放传过来的属性
- props.childern是接收到的插槽;当插槽子节点只有一个props.children是个对象，当插槽子节点有多个，props.children是个数组，数组的每一项是每一个子节点
- 可以通过React上的内置方法，React.Children.map可以循环插槽里的每个节点，并在循环过程中做判断处理
- 可以通过单独赋值一个变量。给props的某个属性设置默认值
import React from 'react';
console.log(React);
function Children(props) {
console.log(props);
// 通过形参props接收父组件传过来的参数，props是个对象，里面存放传过来的属性
// props.childern是接收到的插槽;当插槽子节点只有一个props.children是个对象，当插槽子节点有多个，props.children是个数组，数组的每一项是每一个子节点
// 可以通过React上的内置方法，React.Children.map可以循环插槽里的每个节点，并在循环过程中做判断处理
// 可以通过单独赋值一个变量。给props的某个属性设置默认值
let a = props.a || 12;
return (
<div>
{a}
{/* {props.children}
{React.Children.map(props.children, (item, index) => {
// 只展示第二项
if (index == 1) return item;
})} */}
</div>
);
}
export default Children;
2.类组件
通过继承React.Component这个类创建的类组件
import { Component } from 'react';
// 这种组件又叫受控组件，受状态管控的组件
export default class Fn2 extends Component {
constructor(props) {
super(props);
this.state = {
title: '组件的状态',
};
}
change() {
// console.log(this);
// this.state.title='状态不好玩'
// 上面这种直接赋值的写法，是可以改变state状态值，只是没有触发页面更新
// 通过调用setState方法改变state状态，第一个参数是需要修改的部分状态，第二个参数是回调函数，会在页面更新后触发
// this.setState({
// title:'状态不好玩'
// },()=>{
// console.log(1);
// })
this.state.title = '陈陈很';
this.forceUpdate();
// 用来强制触发页面更新
}
render() {
let { title } = this.state;
return (
<div>
我是类组件------
{title}
<div>
<button onClick={this.change.bind(this)}>按钮</button>
</div>
</div>
);
}
}
import { Component } from 'react';
import PropTypes from 'prop-types';
// prop-types是专门提供给我们给属性设置默认值，定制规则
// 引入React.Component类
export default class Fn extends Component {
// defaultProps规定属性props默认值的
static defaultProps = {
a: 155,
};
// propTypes规定属性规则
static propTypes = {
// 规定a是number类型，并且必填
a: PropTypes.number.isRequired,
// 规定c必须是string或number
c:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
// 规定b是New，Phontos中的某一个值
b:PropTypes.oneOf(['News','Photos']),
// 规定的类型
// PropTypes.number/func/bool/string/array/object/symbol
};
constructor(props) {
super(props);
console.log(props, this.props);
// constructor函数体未执行完之前，这里this.props是undefined，因为实例还没创建完；可以自己手动把props放在实例上this.props=props;也可以把props传个父类让component帮咱们放super（props）这也是项目中常用的方法
}
// render是react提供的，渲染jsx元素并返回;通过内置的render函数返回jsx元素渲染到页面上
render() {
return (
<div>
内置组件
{this.props.a}
</div>
);
}
}
3.生命周期
1.getDefaultProps 先处理props
2.getInitialState在初始化state
3.*ComponentWillMount组件渲染之前的生命周期，经常用来获取数据，可以拿到props和state，但是不能拿到元素
4.render 用来渲染元素的，
5.*componentDidMount 组件第一次渲染之后的生命周期，这里可以拿到元素了
6.如果state改变会触发shouldComponentUpdate，这个钩子函数的返回值会影响页面是否更新，返回true会重新渲染页面，会触发componentWillUpdate=>render=>componentDidUpdate;返回false不会重新渲染页面
7.如果用forceUpdata()强制更新页面，不会触发shouldComponentUpdate直接触发componentWillUpdate=>render=>componentDidUpdate
8.*componentWillUnmount组件卸载之前
import { Component } from 'react';
export default class Life extends Component {
state = {
str: '改变state',
a: 1,
};
componentWillMount() {
console.log('ComponentWillMount');
}
render() {
let { str } = this.state;
console.log('render');
return (
<div>
生命周期{str}
<button
onClick={() => {
console.log(this.state);
}}
>
按钮
</button>
</div>
);
}
componentDidMount() {
console.log('componentDidMount');
// this.setState({
// str: '改变了',
// });
// this.state.str = '要改变第二次';
// this.forceUpdate();
// this.forceUpdate 强制更新，不会触发shouldComponentUpdate
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
// retunrn true 表示允许页面重新渲染；返回false表示不允许页面重新渲染
// 但是不管返回true还是false状态都改变了
// 可以做组件性能优化，控制页面更新的频率
return false;
}
componentWillUpdate() {
console.log('componentWillUpdate');
}
componentDidUpdate() {
console.log('componentDidUpdate');
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
}
