组件的使用
当应用是以多组件的方式实现,这个应用就是一个组件化的应用
注意:
- 组件名必须是首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签 < />
渲染类组件标签的基本流程 - React 内部会创建组件实例对象
- 调用render()得到虚拟 DOM ,并解析为真实 DOM
- 插入到指定的页面元素内部
函数式组件
//1.先创建函数,函数可以有参数,也可以没有,但是必须要有返回值 返回一个虚拟DOM
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcom name = "ljc" />,document.getElementById("div"));
上面的代码经历了以下几步
- 我们调用 ReactDOM.render() 函数,并传入 作为参数。
- React 调用 Welcome 组件,并将 {name: ‘ljc’} 作为 props 传入。
- Welcome 组件将 Hello, ljc 元素作为返回值。
- 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'))
注意点:文章来源:https://www.uudwc.com/A/0kjBe/
- 组件中的 render 方法中的 this 为组件实例对象
- 组件自定义方法中由于开启了严格模式,this 指向 undefined 如何解决
通过 bind 改变 this 指向
推荐采用箭头函数,箭头函数的 this 指向文章来源地址https://www.uudwc.com/A/0kjBe/
- state 数据不能直接修改或者更新