React基础

导入的react.js和react-dom.js 的作用是什么呢？

react.js ：
- 是React的核心代码，
- 主要是用来生成虚拟DOM。
react-dom.js :
- 则是React剥离出的涉及DOM操作的部分，是一个工具包。
- 主要作用：将虚拟DOM渲染到文档中变成实际DOM

补充
react-dom.js常用API：

1. render:挂载，返回element 的实例 || null (语法： render(ReactElement element, DOMElement container, [function callback]))
2. findDOMNode : 作用：获取真正的DOM元素，以便对DOM节点进行操作。
3. unmountComponentAtNode : 用于执行卸载操作，执行在componentWillUnmount之前。

参考
外链

---

React中如何写入样式

查阅资料后，发现较好的方式有：

1. CSS Modules : 将css文件导入到一个变量中，通过编译器生成哈希值，形成独一无二的类名来避免样式的相互影响

import React, { Component } from 'react';
import xxx from 'index.css';
 
class App extends Component {
 
	render() {
		return <div className={xxx.huisiyuan}>组件App</div>
	}
 
}
 
export default App;

参考：CSS Modules 用法教程、Scss 或 less 中 :global{...}的作用

2. styled-components : 在 组件中写样式，修改相对第一种麻烦，但它可以获取到组件的属性，这是它的优势。

const Div1 = styled.div`
	color: red;
	${(props)=> props.big&&`
		font-size: 72px
		`}
`;
 
const Div2 = styled.div`
	color: blue;
	${(props)=> props.small&&`
		font-size: 30px
		`}
`;
 
class App extends Component {
	render() {
		return (
			<div>
				<Div1 big>hello world</Div1>
				<Div2 small>hello world</Div2>
			</div>
		) 
	}
}

参考：聊一聊 React 中的 CSS 样式方案、