React函数式组件类式组件

项目创建

npx craete-react-app my-app
cd my-app
npm start

面向组件编程

组件：用来实现局部功能效果的代码和资源的集合

1.函数式组件：

function MyComponent(){
    return 
我是用函数定义的组件(适用于简单组件的定义)
}
ReactDOM.render( ,document.getElementById('test') )

类的基本知识:

//创建一个Person类
Class Person {
      //构造器方法
      constructor(name,age){
            //构造器中的this是谁？—类的实例对象
            this.name = name
            this.age = age
      }
      //一般方法
      speak(){
            //speak方法放在哪里？—Person的原型对象上，供实例使用
            //通过Person实例调用speak时，speak中的this就是Person实例
            console.log(`我叫${this.name}，年龄${this.age}`);
      }
}
//创建一个Person的实例对象
const p1 = new Person('tom',18)
const p2 = new Person('jerry',19)
p1.speak()
p2.speak()

//创建一个Student类，继承Person类
class Student extends Person {
      //constructor构造器不是一个必须要写的东西
      constructor(name,age,grade){
            super(name,age)  //must need
            this.grade = grade
      }
      //重写从父类继承过来的方法
      speak(){
            console.log(`我叫${this.name}，年龄${this.age}，我读的是${this.grade}年级`);
      }
      study(){
            //study方法放在哪里？—Student类的原型对象上，供实例使用
            //通过Student实例调用study时，study中的this就是Student实例
            console.log("我很努力的学习");
      }
}
const s1 = new Student("小张",15)
console.log(s1);  
s1.speak();
s1.study();
/*
1.类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写;
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中super是必须要调用的;
3.类中定义的方法，都是放在了类的原型对象上，供实例去使用
*/

2.类式组件：

//1.创建类式组件
class Mycomponent extends React.Component{
      render(){
            //render是放在哪里的？—Mycomponent 类的原型对象上，供实例使用。
            //render中的this是谁？—Mycomponent实例对象 <=> Mycomponent组件实例对象。
            return  
我是用类定义的组件,适用于复杂组件
      }
}
//2.渲染组件到页面
ReactDOM.render(,document.getElementById('test') )
/*
执行了ReactDOM.render(...之后发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件时使用类定义的，React随后new出来该类的实例，并通过该实例调用到了原型上的render()方法。  
3.将render返回的虚拟DOM转为真实DOM并呈现在页面当中。
*/

生命周期

1.初始化阶段：由ReactDOM.render()触发—初次渲染
(1). constructor
(2). getDerivedStateFromProps //从Props得到一个派生的状态，即state的值任何时候都取决与props，派生状态会导致代码冗余组件难以维护，罕见
(3). render()
(4). componentDidMount() //组件挂载完了

2.更新阶段：由组件内部this.setState()或父组件重新>render触发
(1). getDerivedStateFromProps
(2). shouldComponentUpdate()
(3). render()
(4. getSnapshotBeforeUpdate //得到快照
(5). componentDidUpdate()

3.卸载组件：由ReactDOM.unmountComponentAtNode()触发
(1). componentWillUnmount()