React组件
::1.使用函数创建组件::
// 1 使用函数名称来作为组件标签的名称
// 2 约定函数组件必须有返回值,若不渲染任何内容就返回null
// 若渲染内容就要返回一个值,一般就是JSX结构
// 3 函数组件名称必须以大写字母开头。 React内部根据首字母开头是不是大写来判断一个组件
// 如果组件没有子节点可以使用单标签
// 5 推荐使用小括号包裹返回的JSX结构,从而避免js中自动插入分号
function Hello() {return (<div>I'm a option</div>) }
ReactDOM.render(<Hello><Hello>,document.getElementById('root'))
::2.使用类创建组件::
::es6中的class::
/*
ES6中的class关键字,用来实现JS中的面向对象
在ES6之前通过构造函数+圆形来实现面向对象
*/
// 构造函数
function Person(name) {
this.name = 'name'
}
// 方法放在原型中
Person.prototype.say = function() {
console.log('hello,I'm' + this.name)
}
// 创建实例对象
const p1 = new Person()
// 创建类
class Person{
// 构造函数
constructor(naem) {
this.name = naem
}
say() {
console.log('hello')
}
}
// 类的实例对象
const p = new Person('rose')
::继承::
要实现继承至少有2个类,一个子类一个父类
// 语法: class 子类名称 extends 父类名称 {}
// 创建父类
class Preson{
constructor(name) {
this.name = name
}
}
// 创建子类
class Chinese extends Person {
constructor(name) {
// 注意,如果手动定制了construstor(),那么必须在第一行手动调用 super ()
// super() 表示父类的构造函数,在当前子类中,就表示Person 的construstor
// 对于同名的属性,子类会覆盖父类的属性
super(name)
this.age = 19
}
}
const c = new Chinese('雄霸')
console.log(c.name)
::创建类组件::
// 1 约定 类组件中必须提供render方法
// 2 约定 render 方法必须有返回值
class Hello extends React.Component{
render(){
return(
<h1>组件</h1>
)
}
}
ReactDOM.render(</Hello>,'root')