组件
- react 当中的组件：状态组件与无状态组件（函数组件）
无状态组件
- 组件的名字首字母要大写。函数的名字即是组件的名字，函数的返回值即是组件的内容
- 返回的内容有且只能有一个根元素
- 必须要有return
实例说明
<div id="root"></div>
<script type="text/babel">
/* react当中的组件：状态组件与无状态组件（函数组件）
* 组件的名字首字母要大写。函数的名字即是组件的名字，函数的返回值即是组件的内容。
* 返回的内容有且只能有一个根元素。
* 必须要有return
**/
function My() {
return (
<div>My 组件</div>
);
}
// 双标签
// ReactDOM.render(<My></My>, document.querySelector("#root"));
// 单标签
ReactDOM.render(<My/>, document.querySelector("#root"));
</script>
实例说明重复使用多个组件
<div id="root"></div>
<script type="text/babel">
function My() {
return (
<div>My 组件</div>
);
}
// 使用多个组件
ReactDOM.render((
<div>
<My></My>
<My></My>
</div>
), document.querySelector("#root"));
</script>
无状态组件属性是不允许被修改
<div id="root"></div>
<script type="text/babel">
function My(props) {
// 属性是不允许被修改
// props.age = 13;
return (
<div>my组件{
props.age}</div>
)
}
ReactDOM.render((
<My age={
12}></My>
), document.querySelector("#root"))
</script>
无状态组件单击 h2 标签显示隐藏实例
- 判断布尔值，通过三元表达式，单击 h2 标签显示隐藏
<div id="app"></div>
<script type="text/babel">
const arr = ['G', 'M', 'L'];
let visible = true;
// 无状态组件 List
const List = (props) => {
// console.log(props);
// props 接收父组件传递过来的值
return (
<ul style={
{
display: visible === true ? 'block' : 'none'}}>
{
props.array.map((item, index) => {
return (
<li key={
index}>{
item}</li>
)
})
}
</ul>
)
};
// 无状态组件 App
const App = () => {
return (
<div>
<h2 onClick={
() => {
visible = !visible;
render();
}}>显示隐藏</h2>
<List array={
arr}></List>
</div>
)
};
function render() {
ReactDOM.render(<App/>, document.querySelector('#app'));
}
render();
</script>
无状态组件渲染对象
- 转换为数组，然后再进行渲染
<div id="app"></div>
<script type="text/babel">
const obj2 = {
a: 'G', b: 'M', c: 'L'};
// class 组件 App
const App = (props) => {
return (
<ul>
{
Object.values(props.obj).map((item) => {
return (
<li key={
item}>{
item}</li>
)
})
}
</ul>
)
};
function render() {
ReactDOM.render(<App obj={
obj2}/>, document.querySelector('#app'));
}
render();
</script>
类组件
- 状态组件是通过class来定义的。需要继承 React.Component 类
- render 方法返回的内容即是该组件的内容
- 类的名字即是组件的名字
- 类组件实例对象内有 4 大常用属性
4 大常用属性
- props:{}：接收父组件通过属性传递的值
- context: {}：隔代接收祖组件传递的值
- refs: {}：获取元素节点，只能在 componentDidMount 获取
- state: {}：存储数据，并用于更新数据，触发 render 函数
<div id="root"></div>
<script type="text/babel">
/*
* 状态组件是通过class来定义的。需要继承 React.Component 类
* render方法返回的内容即是该组件的内容
* 类的名字即是组件的名字
* */
class My extends React.Component {
/*
* constructor 构造函数接收 2 个参数，
* 第 1 个参数：props 对象，接收通过父组件通过属性传递的值
* 第 2 个参数：context 对象，接收上下文环境传递的值
*
**/
constructor(props, context) {
super(props, context);
console.log(context === this.context); // true
}
render() {
console.log(this)
/*
* props: {}
* context: {}
* refs: {}
* state: {}
**/
return (
<div>我是一个状态组件</div>
)
}
}
ReactDOM.render((
<My></My>
), document.querySelector("#root"));
</script>