概述
元素是构成React应用的最小单位，是用来你在屏幕上看到的内容。与浏览器的DOM元素不同，React当中的元素事实上是普通的对象，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。
React元素是不可变的，当元素被创建好后，是无法改变其内容和属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。如果要改变元素的内容和属性，唯一的办法就是创建一个新的元素替换原来的元素。当然，React DOM在渲染元素时，会比较前后内容的不同，只渲染更新的部分。
组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。
元素不是组件，只是组件的一部分，这个不要搞混淆。
元素渲染
定义一个元素，并将该元素渲染到真实的DOM中去
const element = <h1>hello world</h1>
ReactDOM.render(
element,
document.getElementById('root')
);
定义组件
组件的定义有2种方式，函数和类。
注：组件必须以大写字母开头。
函数定义组件
用JavaScript函数定义组件是最简单的方式
function Hello(props) {
return <h1>hello, {props.name}</h1>
}
该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。
类定义组件
使用 ES6 class 来定义一个组件:
class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
以上2个组件在React中是相同的。
组件渲染
元素可以是DOM标签：
const element = <h1>hello world</h1>
也可以是自定的组件：
const element = <Hello name="zhang" />
当React遇到元素是用户自定义的组件时，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”，建议就用“props”。
以下代码将会在浏览器中显示“hello,zhang”
function Hello(props) {
return <h1>hello, {props.name}</h1>;
}
const element = <Hello name="zhang" />
ReactDOM.render(
element,
document.getElementById('root')
);
这个过程是怎么发生的？
1.对元素<Hello name="zhang" />调用了React.render()方法；
2.React将{name: 'zhang'}作为props对象属性传入并调用Hello组件；
3.Hello组件读取props.name，并返回<h1>hello, zhang</h1>;
4.React DOM将DOM更新为<h1>hello, zhang</h1>;
也可以直接渲染组件，效果是一样的：
ReactDOM.render(
<Hello name="zhang" />,
document.getElementById('root')
);
组合组件
组件可以在它的输出中引用其它组件，这样，我们就可以用同一组件来抽象出任意层次的细节，也可以引用不同的组件，组成更复杂的组件。因此，可以将组件细化，最好一个组件只干一件事。复杂的组件就是通过这些简单的组件组合起来的，这样就可以实现组件的复用。在React中，按钮、表单、图片、甚至整个屏幕都可以被表示为组件。
我们可以创建一个Hellos组件，多次渲染Hello组件：
function Hello(props) {
return <h1>hello, {props.name}</h1>;
}
function Hellos(props) {
return <div>
<Hello name="zhang" />
<Hello name="huang" />
<Hello name="liu" />
</div>;
}
ReactDOM.render(
<Hellos />,
document.getElementById('root')
);
当需要渲染不同组件时，也是一样的道理。但是请注意，组件返回只能有一个父元素/根元素，当需要返回多个组件时，可以用一个元素将其包含起来（比如<div></div>）
props
props是作为一个对象传递给组件的，不管组件是函数组件还是类组件，只能读取props的属性值而不能修改，理论上只要传入的值相同，读取输出的也是一样的。但是应用界面是动态的，当要改变内容时又该如何？
这就是后面要讲的state概念。
State可以在不违反上述规则的情况下，根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。
其实就是在state发生改变后重新渲染组件。
注：
本教程相关的所以源码，可在https://github.com/areawen2GHub/reacttest.git下载
参考地址：
https://react.bootcss.com/react/docs/rendering-elements.html
https://react.bootcss.com/react/docs/components-and-props.html
网友评论