react的组件
组件
组件是用来实现局部功能的代码和资源的集合（html/css/js），用来复用代码。
react中分为函数式组件和类式组件。函数式组件就是一个函数，函数的返回值就是组件的视图内容。类式组件就是通过class关键字创建的类，类式组件通过render函数返回视图内容。
函数式组件
function Good(){
return
news
}
类式组件
类式组件必须继承React.Component
class Good extends React.Component{
}
- React解析组件标签，找到Good组件
- 发现组件是使用类定义的，随后new出来该类的实例，并通过该类实例调用到原型上的render()
- 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
简单组件和复杂组件
如果一个组件有状态就是复杂组件，如果一个组件没有状态就是简单组件。
组件实例的属性
组件实例属性包含state、props、refs这三个常用的属性。其中refs只能在类组件中使用，如果在函数式组件中想要使用refs需要使用其他的api获取元素引用。
state
state是组件对象最重要的属性，值是对象。组件被称为状态机，通过更新组件的state来更新对应的页面显示。
状态必须通过setState修改，setState()接收一个对象，对象中设置需要更改的key和value。
class Demo extends React.Component{
state = {
description:'hello'
}
handleClick(){
this.setState({
descriptin:'hello'
});
}
render(){
return
{this.state.description}
}
}
props
组件实例属性props指的是从外部传递给组件的值，props在组件内部是只读的，不能通过this.props.xxx修改。
class Person extends React.Component{
render(){
const {
name,
age,
sex
} = this.props;
return <>
- {name}
- {age}
- {sex}
}
}
我们可以通过propsTypes限制props的类型，通过defaultProps设置props的默认值。propsTypes和defaultProps都是类的静态成员，除了直接使用Person设置之外还可以通过类的语句块中通过static关键字设置。
// 限制props的类型
Person.propTypes = {
name:PropTypes.string,
age:PropTypes.number,
sex:PropTypes.string
}
// 设置props的默认值
Person.defaultProps = {
name:'hello'
}
// 向组件传递props
React.render(static关键字设置propsTypes
class Person extends React.Component{
static propsTypes = {
name:PropTypes.string,
age:PropTypes.number,
sex:PropTypes.string
}
static defaultProps = {
name:'hello'
}
render(){
return
// ...
}
}
refs
组件实例属性refs，refs指的是获取元素的引用。通过给元素设置ref属性得到其引用。refs从使用方式上分为字符串类型、函数类型。字符串类型的如下所示：
class Person extends React.Component{
render(){
return <>
}
}
回调函数形式的refs
回调形式的ref在更新时会执行两次，第一次会传递一个null，第二次才会传递元素。这是因为在更新时会实例化一个新的对象，并重新渲染。
回调函数分为内联的回调函数和类绑定的回调函数
class Person extends React.Component {
state = {
}
static propTypes = {
name: PropTypes.string,
age: PropTypes.number,
gender: PropTypes.string
}
static defaultProps = {
name: 'hello'
}
constructor(props) {
super(props);
}
tooltip = (e)=>{
alert(this.input_left.value)
}
toolTipRight = () => {
alert(this.input_right.value)
}
render() {
return
{this.input_left = el;}} type="text" placeholder="点击按钮提示数据" />
{this.input_right = el;}} onBlur= {this.toolTipRight} type="text" placeholder="失焦提示数据" />
}
}
createRef的refs
除了上面的方式之外，还可以通过createRef创建容器，然后获取元素的引用。
class Person extends React.Component {
myRef = React.createRef()
myRef2 = React.createRef()
state = {
}
constructor(props) {
super(props);
}
tooltip = (e)=>{
console.log(this.myRef)
alert(this.myRef.current.value);
}
toolTipRight = () => {
alert(this.myRef2.current.value);
}
render() {
return
}
}
事件处理
通过onXxx属性指定事件处理函数。
- React使用的是自定义事件，不是原生事件。为了更好的兼容性
- React中的事件是通过委托方式处理的。为了高效
通过event.target得到发生的事件的DOM元素对象
受控组件
页面中所有输入类的DOM，随着输入把数据存入state就是受控组件。
class Login extends React.Component {
state = {
userName:'',
password:''
}
submit=(e)=>{
e.preventDefault();
const {userName,password} = this.state;
}
saveFormData = (key) => {
return (e) => {
this.setState({
[key]: e.target.value
});
}
}
render() {
return
}
}