import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
let bg = {
background:"skyblue",
borderBottom:"4px solid red"
}
let element = (
<div style={bg}>
<h1>123456</h1>
<p>666666</p>
</div>
)
// 创建组建的方式一、函数式组件(简单组件,没有状态组件) 效率要比类组件效率高(因为不需要创建对象)
function Children(){ // 但是如果组件有状态就不能用这个方式创建(没有状态的组件)
return (
<div>
<h1>函数式组件</h1>
</div>
)
}
// 创建组建方式二、类组件(复杂组件)
class Helloworld extends React.Component{
constructor(props) {
super(props) // 调用父类型的构造函数,将props 传给它,说白了就是将props交给父类型去;
// 初始化状态
this.state = {
text:'第一次使用react',
isShow:true
}
// bind 的作用及用法
// 改变函数 this 指向 如:fn.bind(obj) 将fn函数中的this指向obj对象 实际可以理解为 obj.fn()
this.handleClick = this.handleClick.bind(this);
}
// 新添加的方法,里面的this 不是组件对象,而是 undefined
handleClick() {
console.log('handleClick',this) //这里的this指向的是全局作用域,所以会返回undefined
// 得到状态
const isShow = !this.state.isShow
// 更新状态
this.setState({
isShow
});
}
// 获取用箭头函数方法写,就不需要进行 this 的转换;
// handleClick=()=> {
// console.log('handleClick',this) //这里的this指向的是全局作用域,所以会返回undefined
// // 得到状态
// const isShow = !this.state.isShow
// // 更新状态
// this.setState({
// isShow
// });
// }
// 重写组件类的方法,组件中本来就有这个方法
render(){
return (
<div>
<h1>{this.state.text}</h1>
<h2 onClick={this.handleClick}>{this.state.isShow ? '显示了' : '隐藏了'}</h2>
</div>
)
}
}
// 渲染组件标签
ReactDOM.render( // jsx 的语法
<Helloworld/>,
document.getElementById('root') // 将js 的一个普通对象 将它渲染到 dom 上
);
serviceWorker.unregister();
React 学习之基本模板
最新推荐文章于 2024-04-17 17:28:16 发布