【React】函数式组件和类式组件的用法和逻辑

组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用
注意：

1. 组件名必须是首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签 < />
   渲染类组件标签的基本流程
4. React 内部会创建组件实例对象
5. 调用render()得到虚拟 DOM ,并解析为真实 DOM
6. 插入到指定的页面元素内部

函数式组件

//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcom name = "ljc" />,document.getElementById("div"));
1
2
3
4
5
6

上面的代码经历了以下几步

1. 我们调用 ReactDOM.render() 函数，并传入 作为参数。
2. React 调用 Welcome 组件，并将 {name: ‘ljc’} 作为 props 传入。
3. Welcome 组件将 Hello, ljc 元素作为返回值。
4. React DOM 将 DOM 高效地更新为 Hello,ljc。

类式组件

class MyComponent extends React.Component {
	// 如果组件不需要接收props，推荐这样写，不用写构造器
    state = {isHot:false}
    render() {
        const {isHot} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
    }
    //以下代码，直接把函数赋值给变量，相当于在类的实例对象上添加了这么一个方法，另外，箭头函数自身没有this，会逐层往上找，找到类的实例对象（注意这里必须是箭头函数）
    //自定义方法要用赋值语句加箭头函数，方便让this指向当前实例对象
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
}
ReactDOM.render(<MyComponent/>,document.querySelector('.test'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意点：

1. 组件中的 render 方法中的 this 为组件实例对象
2. 组件自定义方法中由于开启了严格模式，this 指向 undefined 如何解决

通过 bind 改变 this 指向
推荐采用箭头函数，箭头函数的 this 指向

3. state 数据不能直接修改或者更新