最近我在朋友圈发现好多人都在学习react，我也来去react凑一波热度，看了一下文档发现有点生涩，就去刷了一波视频，写了一点笔记记录一下！
首先自定义个一个类，将方法写好同时初始化数据
// 创建一个App的类来继承React.Component的可复用的重复组件
class App extends React.Component{
// 初始化一个方法
constructor() {
console.log("构造函数");
// 对这个数组进行封装
super();
// 初始化一个state，后面在对这个键值对进行调用
this.state = {
pokemons: [],
egg:"18岁高中生",
};
}
其次通过fetch方式修改对象属性，把对象属性的内存位置完全改变，并将状态值更新
componentDidMount() {
console.log("组件已挂载");
fetch("https://pokeapi.co/api/v2/pokemon")
.then(res => res.json())
.then(json => {
// 用赋值的方式修改对象属性，对象属性所处的内存位置还是没有改变
// 要把对象属性的内存位置完全改变
// this.state.pokemons = json.results;
// console.log(this.state);
// setState可以输入两个函数作为参数
this.setState(
// 第一个函数用来更新状态值
() =>{
// 直接返回要更新的状态值，不需要把Dom更新一遍
return { pokemons:json.results };
},
// 第二个函数用来更新状态值之后的操作，在第一个函数后执行
() => {
//
console.log( this.state );
}
)
});
}
// 用于在提供的容器参数container 里渲染一个React 元素element。返回对该组件的引用
render() {
console.log("渲染");
// return返回一个js对象，但是js对象没有大括号语法，所以只能用中括号括起来并且用div包裹因为只能有一个组件
// <html>插值表达式</html>
// <ul>
// <li>{ pokmen[0] }</li>
// <li>{ pokmen[1] }</li>
// <li>{ pokmen[2] }</li>
// </ul>
// 在列表里面渲染数据，因为在js里面写html所以要大括号，再给pokmen这个数据循环遍历一下，给pokmen用箭头函数循环遍历出每个<li>里面的pokmen数组
return (
<div>
<h1>卡比兽</h1>
<input type="search" />
<ul>
{
// 按照文档的要求设置key给一个唯一的key值，这样就可以根据key值进行定位更新，不用全部DOM渲染
// map遍历把产生的index参数作为key,每个参数index都不一样.这样保证具有唯一性
// 第一次渲染,key就被设置了,此时初始数组就是字符串组成的,而不是字符串组成的,所以根本获取不到对应的值
// 生命周期:构造函数=>渲染=>组件已挂载=>渲染
// this.state.pokemons.map(( pokemon,index) => <li key= { index }>{pokemon.name}</li> )
this.state.pokemons.map(
pokemons =>
<li key={ pokemon.url }>{ pokemon.name }</li>
)
}
</ul>
</div>
)
}
}
//定义一个root等于ReactDOM创建一个createRoot来接收显示id 属性值为'root'得到对象
const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(<h1>宝可梦</h1>)
// 返回这个组件并显示
root.render(<App/>)
说一点点题外话,自己写作水平不是很行，写到这里后面我觉得react可能得等后面再去看了，现在光凭自己感觉还是难度很大！
