【React基础二】事件绑定、组件props、条件渲染、列表、refs、组件声明周期

文章目录

- [1. 事件绑定](#1. 事件绑定)
- [2. 组件props](#2. 组件props)
- [3. 条件渲染](#3. 条件渲染)
- - [3.1 基本概述](#3.1 基本概述)
  - [3.2 三目运算](#3.2 三目运算)
- [4. 列表](#4. 列表)
- [5. Refs](#5. Refs)
- - [5.1 概述](#5.1 概述)
  - [5.2 引用传递 Forwarding Refs](#5.2 引用传递 Forwarding Refs)
- [6. 组件生命周期](#6. 组件生命周期)

1. 事件绑定

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数
```
<button onClick={()=>{this.tick()}}>
  增加
</button>
```

在通过Class创建的组件内，想要使用this调用函数，可以在构造函数内bind this对象为当前this,也可以在绑定处使用this调用

js 复制代码

class App extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    age:this.props.age
                }
                this.ageChange = this.ageChange.bind(this);
            }
           ageChange(){
                this.setState({
                    age:this.state.age+1
                })
            }

            render(){
                return <div>
                   	<span>我今年{this.state.age}岁了</span>
                    <button onClick={()=>{this.ageChange()}}>过年了</button>
                    </div>
            }
        }

2. 组件props

组件state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。state是组件内部自己定义的，而props是父组件调用时提供的

js 复制代码

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;

通过Class创建的组件，使用this调用props，而在使用之前，需要在类构造函数内，使用super(props)注入

js 复制代码

class HelloMessage extends React.Component {
	constructor(props){
        super(props)
     }
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

3. 条件渲染

3.1 基本概述

在 React 中，可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。也可以在React 中的使用 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

js 复制代码

	const NavTitle=(props)=>{
            if(props.type===1){
                return <h1>{props.title}</h1>
            }else if(props.type===2){
                return <h2>{props.title}</h2>
            }
       }

3.2 三目运算

js 复制代码

const NavTitle=(props)=>{
   return props.type===1?<h1>{props.title}</h1>: <h2>{props.title}</h2>
 }

4. 列表

react中，可以通过数组生成一系列标准结构组件，通过map方法完成列表渲染

js 复制代码

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);

生成原理其实是使listItems成为一个数组容器，容器内部则是<li>{numbers}</li>组件，最后react内部可直接展开数组渲染

如果直接将numbers最为组件，则会展开成为内容被渲染

react在列表渲染的时候需要给组件指定一个key作为组件的唯一标识 ，该属性不会作为组件的props被接收，仅供react内部计算使用

Key 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。

5. Refs

5.1 概述

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到render() 输出的标签上。

这个特殊的属性允许你引用相应的实例。

js 复制代码

<input ref="myInput" />
var input = this.refs.myInput;

5.2 引用传递 Forwarding Refs

如果需要给组件绑定ref则上面的方式不支持，react提供了forwardRef方法来支持组件的引用，引用测方式是用过forwardRef函数传递ref的引用

js 复制代码

const InpuDom= forwardRef((props, ref) => (
    <input type="text" ref={ref} />
));

js 复制代码

class ForwardRef extends Component {
    constructor(props) {
        super(props);
        this.ref = createRef();
    }

    componentDidMount() {
        const { current } = this.ref;
        current.focus();
    }

    render() {
        return (
            <div>
                <p>forward ref</p>
                <InpuDom ref={this.ref} />
            </div>
        );
    }
}

6. 组件生命周期

组件生命周期的方法有：

componentWillMount --在渲染前调用
componentDidMount --在第一次渲染后调用
componentWillReceiveProps --在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate --返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。（可以在你确认不需要更新组件时使用。）
**componentWillUpdate ** --在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate --在组件完成更新后立即调用。在初始化时不会被调用。
**componentWillUnmount ** --在组件从 DOM 中移除之前立刻被调用。