react 学习笔记（一）

仅为了在学习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>
	);
}