Reading《Mastering React》

Posted by yellowDog on 2018-05-24

题外话

英语课读了一点Mastering React,看英文版总觉得更爽一点,中途也查了一些单词呐…(膨胀了 hhh(・ェ・。)


Why embrace React?

  • Make operations on the DOM minimal
  • Pay more attention to complex application logic

Development of JavaScript

  • jQuery interact with DOM
  • XML and JSON
  • nowadays framework and different patterns such as Functional, Prototype, Object-Oriented, MVC, MVP, MVVM
  • Preprocessor: Babel, TypeScript

题外话 233(6.5)

其实这篇博客鸽了蛮久的,一直在忙 OASIS 小程序,今天无意中看到学长在学 React,然后我凑过去看了一下,我说我直接用 cdn 好像没用,然后他们帮我从 bootcdn 上面重新复制了 React 和 ReactDOM 的 cdn,但是发现控制台还是报

1
Uncaught SyntaxError: Unexpected token <

但是他们的电脑上能跑起来,后来彭老板直接从官网拉了实例的代码,发现在我这里跑起来了,最后发现是没有用 babel 编译,唔,总算是 Hello World 啦

可能还是鸽挺久呢,不说了,要去西加加和高数了(・ェ・。)

Introduction

1
2
3
4
5
6
7
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}

ReactDOM.render(<HelloMessage name="John" />, document.getElementById(`root`));

Flying cars and bettering on JavaScript~


JSX防止注入

React DOM在渲染之前把JSX嵌入值转义成字符串


工作原理

Babel将JSX编译成React.createElement()调用

1
2
3
4
5
6
7
8
9
10
11

const element = <h1 class="demo">hello world</h>

//
const element = {
type: `h1`,
props: {
className: `demo`,
children: `hello world`
}
}

  • React元素不可变

  • React DOM 将元素及其子元素与前一元素比较,内容修改的节点才会被React DOM更新


组件

function/class来定义组件

1
2
3
4
5
6
7
const hello = (props) => <h1>hello{props.name}</h1>

class Hello extends React.Component {
render(){
return <h1>hello{this.props.name}</h1>
}
}

渲染

1
const element = <Hello name="mikasa" />;

组件名要大写,小写字母开头的被视作DOM标签


props is Read-Only