一、通过 JS函数 创建(函数组件,无状态组件)
- 注意:1. 函数名称必须为大写字母开头,React通过这个特点来判断是不是一个组件
- 注意:2. 函数必须有返回值,返回值可以是:JSX对象或
null
- 注意:3. 返回的JSX,必须有一个根元素
- 注意:4. 组件的返回值使用
()
包裹,避免换行问题
function Welcome(props) {
return (
// 此处注释的写法
<div className="shopping-list">
{/* 此处 注释的写法 必须要{}包裹 */}
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
ReactDOM.render(
<Welcome name="jack" />,
document.getElementById('app')
)
二、class创建(类组件,有状态组件)
1. 在es6中class仅仅是一个语法糖,不是真正的类,本质上还是构造函数+原型 实现继承。
2. 类的首字母需大写。
3. class创建的组件中 必须有rander方法 且显示return一个react对象或者null。
// ES6中class关键字的简单使用
// - **ES6中的所有的代码都是运行在严格模式中的**
// - 1 它是用来定义类的,是ES6中实现面向对象编程的新方式
// - 2 使用`static`关键字定义静态属性
// - 3 使用`constructor`构造函数,创建实例属性
// - [参考](http://es6.ruanyifeng.com/#docs/class)
// 语法:
class Person {
// 实例的构造函数 constructor
constructor(age){
// 实例属性
this.age = age
}
// 在class中定义方法 此处为实例方法 通过实例打点调用
sayHello () {
console.log('大家好,我今年' + this.age + '了');
}
// 静态方法 通过构造函数打点调用 Person.doudou()
static doudou () {
console.log('我是小明,我新get了一个技能,会暖床');
}
}
// 添加静态属性
Person.staticName = '静态属性'
// 实例化对象
const p = new Person(19)
// 实现继承的方式
class American extends Person {
constructor() {
// 必须调用super(), super表示父类的构造函数
super()
this.skin = 'white'
this.eyeColor = 'white'
}
}
// 创建react对象
// 注意:基于 `ES6` 中的class,需要配合 `babel` 将代码转化为浏览器识别的ES5语法
// 安装:`npm i -D babel-preset-env`
// react对象继承字React.Component
class ShoppingList extends React.Component {
constructor(props) {
super(props)
}
// class创建的组件中 必须有rander方法 且显示return一个react对象或者null
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
testArr: ['苹果','香蕉']
};
}
componentDidMount(){
this.setState({
testArr:[...this.state.testArr,'橘子']
})
}
render(){
return (
<React.Fragment>
<p>{this.state.testArr}</p>
</React.Fragment>
)
}
}