react
设计思想
component
react的设计通常把整个website看做一个app，其本身是一系列组件的集合，其设计的核心是把一个大的组件·分成一系列小的组件，如此划分下去，组件的内部需要一定的逻辑上的耦合。
对于每一个website，我们都可以画出它的组件树，组件树为我们提供一个清晰的消息传递的方向。
props 是指父亲组件传递向子组件的消息，对于任意的子组件，props是read-only。(无需更新的信息)
state 状态是指一个组件内部私有的信息，被这个组件独立维护，例如下图。state用来处理对于这个组件的输入信息，而设计上而言，父组件不能获取state的信息。react component都需要有一个initial function来初始化state。（需要更新的信息）
make states stay and make props pass
代码实践
tips： 对于react来说，需要使得生成的html code接受到css的效果，要用className代替class
对于一个react component来说，需要
- 一个constructor来接受props并且做initialize
- 一个render()来返回HTML-like code
react中展示空用null
react会在更新state的时候自动刷新render(包括所有子组件)，但是update state需要特定的做法，需要调用setState函数，而不是直接依赖“=”去修改我们的state，给个例子
likeComment = () =>{
this.setState({
isLiked : true,
});
}
...
render(){
return(
<div ... onClick = {this.likeComment}> 不需要在这里加上括号
{this.props.content}
{this.state.isLiked ? <LikeButton/>:null}
</div>
);
}
如何在父组件中导入子组件
- 首先需要import
import CatHappiness from "../modules/CatHappiness.js"
。。。。
<CatHappiness catHappiness={catHappiness}/>
基础的格式为
<Component propName={propValue}/>
- component指代我们需要的组件名称，propName是指我们需要传入的信息的名称，propValue是指需要传入的信息的值、
函数组件和类组件
一些简单的情况下我们可能可以采用函数组件来进行编写（个人认为类组件更加符合设计一点
两者功能是相同的，在传递props的行为上有些许不同
在函数形式中标准做法例子
const [catHappiness, setCatHappiness] = useState(0); 初始化的时候同时定义变量和对应的set更新函数
const incrementCatHappiness = () => {
setCatHappiness(catHappiness + 1);
};
<div className="Profile-avatarContainer" onClick={incrementCatHappiness}>
<div className="Profile-avatar" />
</div>
一些tips
对于顶层的App.js来说，其不需要构造函数
在react中，命名规范应当是类似于NavBar-contianer
如果一个组件只有render函数，可以简写为
const Profile = () => {
return (
<div>
<div className="Profile-avatarContainer">
...
</div>
);
};
export default Profile;
react的html元素是组件化的，但是js本身支持把简单的html赋值给js变量，因此一些简单的情况下无需创建新的组件
组件挂载和组件更新
开发指令
对于react而言，我们不能简单地找一个html文件在浏览器中打开，我们需要在文件目录下执行npx webpack指令，其会在/client/dist下面生产一个index.html文件，我们可以在浏览器中打开它。
但是问题在于我们的修改不会实时反应在这个index.html上，会使得我们的工作流变的复杂
对此我们可以使用npm run hotloader 指令，在主机的一个端口上打开一个实时更新的页面
文件组织和import
基础的代码组织如上图，我们主要编写代码都在src/文件夹中
- public文件夹内置全局会用到的一系列资源，比如图片等
- utilities.css 中主要包括全局会用到的一些典型的css效果，通常是简单的和常用的，并且一般会包括所有的css变量
utilities.js 中一般包括一系列js函数来做API request - component/文件夹中包括网页的主体内容，一般就是js文件搭配对应的css文件
- modules/文件夹中包括网页的具体的组成部分，也就是react设计中网页被拆解成的各种的component
pages/文件夹包括网页的各个页面，一个网页不止一个页面，一般每个页面会给一个文件，来组织modules文件夹中的components - 在App.js中组织所有的pages