1.学习react和vue的区别
主要学习了react的数据渲染方式，这和vue差别很大；
数据是否可变
React：整体是函数式的思想，在react中，是单向数据流，推崇结合immutable来实现数据不可变。
Vue：的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
编译&写法
React：思路是all in
js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等。
Vue：把html，css，js组合到一起，用各自的处理方式，Vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
重新渲染和优化
当你比较React和Vue时，速度不能成为决定哪个更好的重要比较因素。在性能方面，让我们考虑重新渲染功能。当组件的状态发生变化时，React的机制会触发整个组件树的重新呈现。您可能需要使用额外的属性来避免不必要地重新渲染子组件。虽然Vue的重新渲染功能是开箱即用的，但Vue提供了优化的重新渲染，其中系统在渲染过程中跟踪依赖关系并相应地工作。重新渲染是Vue最显着的特征，也使其成为全世界开发人员广泛接受的框架。
类式的组件写法，还是声明式的写法
react是类式的写法，api很少，而Vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，Vue稍微复杂。
路由和状态管理解决方案
在像React和Vue这样的基于组件的框架中，当您开始扩展应用程序时，需要更加关注状态管理和数据流。这是因为有许多组件相互交互并共享数据。在这种情况下，React提供了一种称为Flux
/
Redux架构的创新解决方案，它代表单向数据流，是著名MVC架构的替代方案。现在，如果我们考虑Vue.js框架，就会有一个名为Vuex的更高级架构，它集成到Vue中并提供无与伦比的体验。
构建工具
React和Vue都有一个非常好的开发环境。只需很少或没有配置，就可以创建应用程序，能够使用最新的实践和模板。在React中，有一个Create
React App（CRA），在Vue中，它是vue-cli。这两种引导工具都倾向于提供舒适灵活的开发环境，并提供开始编码的出色起点。
Vue的优势包括： 模板和渲染函数的弹性选择， 简单的语法及项目创建， 更快的渲染速度和更小的体积；React的优势包括： 更适用于大型应用和更好的可测试性，同时适用于Web端和原生App， 更大的生态圈带来的更多支持和工具 。
而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的。如果想将降低学习成本或前端JavaScript框架集成到现有应用程序中，Vue是更好的选择，如果想构建大型应用项目或者使用JavaScript构建移动应用程序，React绝对是最好的选择。
以上参考：https://blog.csdn.net/weixin_44246717/article/details/113853786
2.建立一个新的react项目
npx create-react-app my-app
3.组件 Todolist
import { Component, Fragment } from "react"
//创建组件的方法
class Todolist extends Component {
//组件创建时首先会执行的方法
constructor(props){
super(props);
//这个state是用来存当前组件的变量，后面获取这个值都需要通过state获取
this.state = {
inputValue: '',
list:[]
}
}
handleInputChange (e) {
// console.log(e.target.value)
this.setState({inputValue:e.target.value})
}
handleKeyUp (e) {
// console.log(e.keyCode)
if (e.keyCode === 13 && this.state.inputValue!=="") {
const list = [...this.state.list,this.state.inputValue]
this.setState({
list
})
this.setState({inputValue:''})
}
}
deleteClick (index) {
console.log(index)
let list = [...this.state.list]
list.splice(index, 1);
//改写变量要通过setState
this.setState({
list
})
}
render(){
return (
//这是jsx语法，可以直接在render里加上dom标签，如果要使用变量，一定要加大括号，事件监听如果用到this，一定要bind传递this
<Fragment>
<input value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)}
onKeyUp={this.handleKeyUp.bind(this)}
/>
<ul>
{this.state.list.map((value, index)=>{
return (<li key={index} onClick={this.deleteClick.bind(this,index)}>
{value}
</li>)
})}
</ul>
</Fragment>
)
}
}
export default Todolist
4.index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import Todolist from './Todolist';
//组件头字母必须大写，jsx拼写也要头字母大写
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<div>
{/* <App /> */
<Todolist/>
</div>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
