慕课网React学习笔记（一）

React 的提出 ：Facebook f8，颠覆式前端UI开发框架

传统的HTML

代码越来越多，难以维护，力不从心

解决方法

google 提出了anjular.js,,
不足之处：不适用于对性能要求较高的站点，比如移动端的web站，UI组件的封装相对复杂，不利于重用

初始React

1. React 不是一个完整的 MVC、MVVM 框架，其只负责 View 层，MVC 已经不适用于某些场景的开发
2. React 跟 Web Components 不冲突
3. React 的特点就是“轻”，数据单向绑定，独立、小巧、快速、创新
4. 组件化的开发思路，小组件构成大组件，高度可重用

React 应用场景

1. 复杂场景下的高性能
2. 重用组件库，组件组合
3. “懒”，少做无用功

前置知识

1. JS CSS
2. Sass Compass
3. Yeoman Grunt Webpack，前端自动化方案
4. CommonJS（规范）， NodeJS
5. Git GitHub

如何成长为一名优秀的程序员

1. 无论知识有多新、项目有多难，只要来了什么姿势都要上
2. 没人疼、没人爱，团队中没人可以帮上忙，要学会借助外力，视频、Google、开源项目
3. 积极要求进步

React-JSX-Style

1. JSX 实际上是一种语法糖，写法类似原生的HTML 嵌套一些JS 变量，其中的JS 变量部分需要用一对大括号包括（如视频里的{this.props.name}）。JSX 最终会由解析器编译成真正的JS（视频里没讲到的是，JSX 并不是必须的，需要渲染的内容完全可以直接用JS 写）；
2. JSX 中如果要为标签设置类属性，其名称应为className；因为class是JS 里的关键字（JSX 只是语法糖，最后要被编译成JS，所以要考虑JS 的语法约束）；
3. JSX 中为标签设置样式属性，属性值应为一个对象；由于对象的字面量形式包括一对大括号，所以实际写法应该是style={{color: "red", fontSize: '16px'}}。注意到这里定义字体大小用的是fontSize而不是font-size，因为JS 操作CSS 属性名就是以驼峰形式的。

JSX: X->XML :语法糖，（糖衣语法），
CoffeeScript
TypeScript

它们最终会解析成JS，引入解析器

小例子

{}表示里面执行的是js表达式

现在一般这么写

class Hello extends React.Component{
  render(){
    return <div>Hello,{this.props.yourName}.My name is {this.props.myName}</div>;
  }
}

ReactDOM.render(
  <Hello yourName="World" myName="Lin" />,
  document.getElementById('root')
);

hook函数：钩子

对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行

可以理解为回调，当系统执行到某一阶段，检查是否有hook，有则调用

不大明白