react 官网笔记 01

之所以从react官网学习react,1是因为英语不好, 希望能有所改进,内容不保证对错,只是自己的理解

更好的请参见  http://www.css88.com/react/docs/context.html

在react中使用JSX语法,可以把它理解为一种融合html与js的新语言,整个react都是由他构成

react的 唯一渲染出口应该就是

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

react是从js的角度来看待程序的组成的, 通过js把一切资源组织起来运行. 为了在js中更方便的调用html渲染页面,react使用jsx语法,来融合html和js

const element =( 
Hello, world!
;)   //当jsx语法多行时,最好用()包裹

jsx 在经过babel编译后, 会变成一个普通的 js函数,也就是一个js的对象了, babel编译jsx成一个React.createElement()调用,

const element = (
  

    Hello, world!
  
);
这两种写法相等
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
)

浏览器上DOM的修改的成本是很大的,因为js是单线程循环,与代码逻辑共有同一线程,因此频繁修改会造成ui线程的卡顿感以及

js代码执行的延迟,如果每次修改一个DOM树上的一个子元素而要全部新建替换整个DOM就太低效了,理想的情况是只修改那个

子DOM元素,这份工作实际上React帮我们通过算法自动完成了,所以每次我们Reder时候,从代码逻辑上看好像是从新渲染整个

DOM,而实际上内部算法只是更新了改变的那部分.

 上面提到的 elements被叫做React elements,  可以这么理解,  对于react解释器来说,  这种类型的变量 相当于一种描述(用来告诉解释器应该如何渲染DOM的外观),这种变量生成成本特别低,只是一种描述,不是真正的DOM元素(界面)

 一般情况下,react都是渲染在一个根DOM元素上的

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')//根DOM
);

 React Dom更新 DOM是很有效率的,他的逻辑是比较这次新React elements与上次React element的差别,然后只更新对应DOM,尽量最小代价的更新界面,这个虚拟在内存里的React element实际上就是大名鼎鼎的虚拟DOM,所以我们应该换一种角度来思考问题,想要什么样的界面取决于对应的model结构映射,而不是思考如何手动获得DOM引用然后修改这个DOM元素的属性来修改界面.

Components

 组件是react的一种组织形式,他像一个函数,接受参数(prop)然后返回一个react element,用来渲染界面

组件有两种形式:

 1 函数形式

function Welcome(props) {
  return <h1>Hello, {props.name}h1>;
}

 2 ES6 class形式(有一些额外的功能,比如生命周期钩子,state)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}h1>;
  }
}

const element = <Welcome name="Sara" />;

当react 渲染这个react element时, 会解析attributes成为一个对象prop传入组件.

有几个注意事项:1 react应该抽象成组件去思考所有要完成的功能,而且组件应该尽可能的细分成只实现一个功能的模块,组件只完成它自己的职责,有关组件对外提供的prop中的属性再设计的时候应该从组件本身角度考虑如何命名,而不是从使用场景上决定.

2 react应该遵循纯函数设计思想,相同输入,相同输出,而不应该更改输入值.同样react中如果在子组件中 修改props.A这种基本类型,父组件的实参是不会被更改的,但是因为js的限制,对于props.B(一个对象).a被修改上层也会被修改,所以应该极力避免.