1,自定义组件(Component)
1)react的核心语法和概念 调试工具安装
2)作用类似于angular中自定义标签指令
3)组件的2个基本概念
组件类(工厂函数/构造函数/类):MyComponent
组件标签:<MyComponent/>
4)定义组件类
方法1 :工厂(无状态)函数
function MyComponent1(){
return <h1>自定义组件标题</h1>
}
方式2 :ES6类语法(复杂组件,推荐使用)
class MyComponent2 extends React.Component{
render(){
return <h1>自定义组件标题</h1>
}
}
方式3 : ES5老语法
var MyComponent3 = React.createClass({
render(){
return <h1>自定义组件标题</h1>;
}
});
5)渲染组件标签
ReactDom.render(<MyComponent/>,document.getElementById(‘example’));
注意:
1返回的组件类必须首字母大写
2 虚拟DOM元素必须只有一个根元素
3虚拟DOM元素必须有结束标签
6) ReactDom.render()渲染组件标签的基本流程
1 React内部会创建组件实例对象
2 得到包含的虚拟DOM并解析为真实DOM
3 插入到指定页面元素内部
2,组件3大属性之一:props属性
1)每个组件对象都会有props(properties的简写)属性
2) 组件标签的所有属性都会保存在props中
3) 内部读取某个属性值: this.props.propertyName
4) 作用:通过标签属性从组件外向组件内传递数据(只读)
5) 对props中的属性值进行类型限制和必要性限制 使用 PropTypes 进行类型检控制台报错解决措施
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
6) 扩展属性:将对象的所有属性通过props传递
<Person {...person} />
7) 默认属性值
Person.defaultPros = {
name : "帅明"
}
8)组件类的构造函数
constructor(props){
super(props);
console.log(props); //查看所有属性
}
super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。