项目创建
npx craete-react-app my-app
cd my-app
npm start
面向组件编程
组件：用来实现局部功能效果的代码和资源的集合
1.函数式组件：
function MyComponent(){
return <h2>我是用函数定义的组件(适用于简单组件的定义)</h2>
}
ReactDOM.render( <MyComponent/>,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 <h2>我是用类定义的组件,适用于复杂组件</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent />,document.getElementById('test') )
/*
执行了ReactDOM.render(<MyComponent/>...之后发生了什么？
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()
