「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」
1.展示组件
展示组件是一个类或功能组件，用于描述应用程序的展示部分。
//展示组件
class TodoList extends React.Component{
constructor(props){
super(props);
}
render(){
const {todos} = this.props;
return (<div>
<ul>
{todos.map((item,index)=>{
return <li key={item.id}>{item.name}</li>
})}
</ul>
</div>)
}
2. 容器组件
容器组件是连接到 Redux Store的组件的非正式术语。容器组件订阅Redux 状态更新和dispatch操作，它们通常不呈现 DOM 元素；他们将渲染委托给展示性的子组件。
//容器组件
class TodoListContainer extends React.Component{
constructor(props){
super(props);
this.state = {todos:[]}
this.fetchData = this.fetchData.bind(this);
}
componentDidMount(){
this.fetchData();
}
fetchData(){
fetch('/api/todos').then(data =>{
this.setState({
todos:data
})
})
}
render(){
return (<div>
<TodoList todos={this.state.todos} />
</div>)
}
}
3.展示组件和容器组件的区别
-
有状态【Stateful】和 无状态【Stateless】:
容器组件倾向于有状态，展示组件倾向于无状态，这不是硬性规定，因为容器组件和展示组件都可以是有状态的。
-
类【Classes】 和 函数【Functions】:
组件可以被申明成类或函数，函数组件定义简单，但是他缺乏目前仅用于类的一些功能。虽然函数组件有很多限制，但是直到现在还有人使用，是因为函数组件容易理解，建议在不需要自己的state,lifecycle hooks,或性能优化的情况下使用函数组件。这些仅适用于类组件。
4.函数组件
//1.创建函数式组件
function MyComponent(){
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
5.类组件
//1.创建类式组件
class MyComponent extends React.Component {
render() {
//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'));
/*
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
6.函数组件和类组件的区别
- 函数式组件一般用于比较简单的组件定义，类组件用于复杂的组件定义
- 函数组件中的this是undefined，类组件中的this指向的是当前组件的实例对象
- 函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。
- 函数组件没有生命周期和状态state，而类组件有。
- 你不能在函数组件中使用生命周期钩子，原因和不能使用
state一样，所有的生命周期钩子都来自于继承的React.Component中。 - 函数组件ReactDOM.render的过程：
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
类组件中ReactDOM.render的过程：
执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
1.React解析组件标签，找到MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实的DOM，随后呈现在页面中
