React 元素渲染

React 元素渲染官方传送门

元素渲染

元素是构成 React 应用的最小砖块。

将一个元素渲染为 DOM

想要将一个 React 元素渲染到根 DOM 节点上，只需把他们一起传入 ReactDOM.render():

<div id="root"></div>
const element = <h1>Hello, word</h1>;
ReactDOM.render(element, document.getElementById('root'));

更新已渲染的元素

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
举例(计时器)：

function tick() {
    const element = (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
      </div>
  );
  ReactDOM.render(
      element,
      document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

React 只会更新必要的部分
值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

React 组件

函数组件与 class 组件

React 的组件可以定义为 class 或函数的形式。

函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
ReactDOM.render(<Welcome name="React" />, document.getElementById('root'));

class组件

class Welcome extends React.Component{
     constructor(props) {
       super(props); 
     }
    render() {
       return <h1>欢迎, {this.props.name}</h1>;
    }
}
ReactDOM.render(<Welcome name="React" />, document.getElementById('root'));

注意：组件名称必须以大写字母开头。
两个组件在 React 里是等效的
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。
除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

组合组件

通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

实现输出网站名字和网址的实例：

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}

function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}

function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}

function App() {
    return (
        <div>
            <Name name="百度"/>
            <Url url="http://www.baidu.com"/>
            <Nickname nickname="Baidu"/>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

最后编辑于：2020.06.23 11:36:46