React学习手册-React运行机制笔记(二)

建立页面

为了使用React,要运用两个类库:React和ReactDOM.React用来创建视图;ReactDOM用来在浏览器中渲染UI。

虚拟DOM

虚拟DOM是由React元素组成的,概念上与HTML元素类似的,不过他们实际上是JavaScript对象。直接访问JavaScript对象要比访问DOM API高效的多。我们可以修改Javascript对象,即虚拟DOM,然后React会通过DOM API尽可能高效地渲染这些变更。

React元素

一个React元素是对实际DOM应该如果表示的具体描述。换句话说,React元素表示应该如何创建浏览器DOM的一组指令。

1React.createElement('h1', // 元素名 2 {id: 'recipe-0', 'data-type': 'title'}, //属性 3 'Bake Salmon' // 子节点,这里是一个文本 4); 5<h1 data-reactroot id='recipe-0' date-type='title'>Bake Salmon</h1> 6复制代码 7

ReactDOM

用ReactDOM渲染一个React元素。

1ReactDom.render(reactElement, document.getElementById('target')) 2复制代码 3

使用数据构造元素

React可以将数据和UI元素隔离。

1React.createElement( 2 'ul', // 元素名 3 {className: 'ingredients'}, // 属性,className代替class表示类名 4 items.map((ingredient, i) => // item是一个JavaScript数组 5 React.createElement('li', {key: i}, ingredient); // key可以帮助react高效更新DOM 6 ) // 子节点,这里是一系列<li> 7) 8复制代码 9

React组件

三种创建组件的方法:

  1. React.createClass

1const IngredirentsList = React.createClass({ 2 displayName: 'IngredirentsList', 3 render () { 4 return React.createElement('ul', {className: 'ingredients'}, 5 this.props.items.map((ingredient, i) => 6 React.createElement('li', {key: i}, ingredient);) 7 ) 8 } 9}); 10ReactDOM.render( 11 React.createElement(IngredirentsList, {items}, null), items是一个包含原料的数组 12 document.getElementById('target') 13) 14复制代码 15
  1. React.Component

1class IngredientList extends React.Component { 2 renderListItem (ingredient, i) { 3 React.createElement('li', {key: i}, ingredient);) 4 } 5 6 render { 7 return React.createElement('ul'. {className: 'ingredients'}, 8 this.props.items.map(this.renderListItem) 9 ) 10 } 11} 12复制代码 13
  1. 无状态函数式组件:是(纯)函数而非对象,没有this作用域

1const IngredientList = props => 2 React.createElement('ul', {className: 'ingredients'}, 3 props.items.map((ingredient, i) => { 4 React.createElement('li', {key: i}, ingredient);) 5 }) 6) 7复制代码 8

三种方法适用场景: 1.无状态组件:纯展示组件,只负责展示传入的props,不涉及state 2.createClass: 能用React.Component就别用这个方法了 3.React.Component: 推荐方法。 2、3的区别包括,this的绑定,prop和state配置的不同。详情点击这里

DOM渲染

如果有新DOM需要插入,ReactDOM以最小的代价完成插入,如果数据改变导致页面的修改,那么ReactDOM会更新更改的DOM元素。以确保搞笑的UI重绘。

代码交流 2021