React 了解内容

2022-03-22 103 阅读1分钟

1. 元素

元素是构成 React 应用的最小组成部分，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象，React DOM 负责更新 DOM 来与 React 元素保持一致。

const element = <h1>Hello, world</h1>;

html 文档通常有一个 "根" DOM节点，该节点里面的所有内容都将由 React DOM 管理。如果想将一个React元素渲染到根DOM节点，只需把它们一起传入ReactDOM.render()。

<div id="root"></div>

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

React元素是不可变对象，一旦创建就不能更改它的子元素或属性。一个元素就像电影的单帧，代表了某个特定时刻的UI。

2. 组件

组件类似于js函数，返回 React 元素，分为函数组件和class组件：

1. 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
2. 类组件（函数组件 => 类组件）
class Welcome extends React.Component {  // 1.继承
  render() {  // 2.添加空的 render()
    // 3.将函数体移动到 render() 中
    return <h1>Hello, {this.props.name}</h1>;  // 4.用this.props替换props
  }
}

无论是哪种组件，都不能修改自身的 props，必须像纯函数一样保证它们的props不被更改。

纯函数：不会更改参数，并且多次调用下入参相同则结果相同。

3. state

由于 React 元素是不可变对象，所以我们想要更新UI时只能创建新的元素再调用 ReactDOM.render()。如果我们希望只编写一次代码就能够让组件自我更新，那可以借助state。

state 与 props 相似，但 state 是私有的，完全受控于当前组件。