仅为了在学习react过程中做的笔记
入门教程(hello world)
Hello World
import React from 'react';
import ReactDOM from 'react-dom';
这两个包是react中基础的库,react包主要是用于定义组件, react-dom 则包含了渲染浏览器和操作dom元素的相关API. 另外还有react-native包
function Hi(){
return <div>Hello world!</div>
}
ReactDOM.render(<Hi />, document.querySelector('#root'));
其中 函数Hi返回的是一个JSX语句,它是基于XML语法。通过ReactDom.render(…), 将网页中的root ID标题替换为该JSX语句,并重新渲染。这样,react可以将网页进行碎片化,每一块都可以用一个函数(或类)进行编码。
Props
为了实现对某些组件代码的复用,需要将值传入组件中。
function Hi(Props){
return <div>Hello {Props.name}!</div>
}
ReactDOM.render(<Hi name='YHH'/>, document.querySelector('#root'));
其中JSX 中可以添加js代码,通过{}将代码段包裹起来。另外Props可以用解构的写法进行替换
function Hi({name}){
return <div>Hello {name}!</div>
}
State
在实际场景中,需要对网页中的某些数据进行绑定,当该值变化时需要重新渲染网页,react中可以使用State进行实现。
/*index.css*/
html body{
height:100%;
margin:0;
}
.light{
background:white;
color:black;
}
.dark{
background:black;
color:white;
}
import './index.css'
function Room(){
const [isLit, setLit] = React.useState(true);
return <div className={isLit?'light':'dark'}>
<p>{isLit?'light':'dark'}</p>
<br/>
<button onClick={()=>(setLit(!isLit))}>flip</button>
</div>
}
其中React.useSate初始化了一个State, isLit 存的是该初始化值(只读),setLit则是用于对该值进行修改并重新渲染网页。
Fetch
在项目中获取服务端的数据时,可以借助axios库中的API。
import axios from 'axios';
function Reddit(){
const [posts, setPosts] = React.useState([]);
React.useEffect(()=>{
// 该地址访问不到
axios.get(`https://www.reddit.com/r/reactjs.json`)
.then(res=>{
const newPosts = res.data.data.children.map(obj=>obj.data);
setPosts(newPosts);
});
}, []);
return (
<div>
<hl>/r/reactjs</hl>
<ul>
{posts.map(post=>(
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}