一、写一个时钟
- 用 react 写一个每秒都可以更新一次的时钟
import React from 'react'
import ReactDOM from 'react-dom'
function tick() {
let ele = <h1>{ new Date().toLocaleTimeString() }</h1>
// Objects are not valid as a React child (found: Sun Aug 04 2019 20:34:51 GMT+0800 (中国标准时间)). If you meant to render a collection of children, use an array instead.
// new Date() 是一个对象数据类型的值，React 元素不接收对象作为其子元素
ReactDOM.render(ele, document.querySelector('#root'))
}
tick()
setInterval(tick, 1000) // 如果不包在一个函数中，时钟是不会每秒更新一次
但是 React 和 Vue 相同都是数据驱动的，但是这个时候和数据驱动没啥关系，每隔1秒钟重新创建一个 ele，然后再渲染到页面中，视图才发生变化；为了使用数据驱动，我们需要使用 React 的组件
二、React 的组件
在 React 组件中，jsx 元素（也称 react 元素）是组件的基本组成单位
在 react 中定义组件有两种方式：
- 函数（function）定义组件
- 类（class）定义组件
- 定义组件的要求：
-
- 组件的名字首字母必须大写，为了在写 jsx 时区分原生 html 标签
-
- 组件定义后，就可以当做一个标签在 jsx 语法中使用
-
- 如果使用函数定义组件必须返回一个 jsx 元素
2.1 React 的函数组件
react 使用函数定义组件，就是声明一个函数;
- 函数接收一个 props 参数；props 是对象，是在渲染或者父组件通过 prop（属性） 传递过来的数据；
- 函数返回一个 jsx 元素，在组件中需要的数据可以通过 props 传入；
// 1. 函数定义组件
function Welcome(props) {
// props 是一个对象，是使用组件时，写在组件行内的属性和属性值组成的；
console.log(data)
return (<div>
<p>{props.data.name}; {props.data.age}</p>
<p>{props.x}</p>
</div>)
}
ReactDOM.render(<Welcome data={{name: 'mabin', age: 18}} x='hahah' />, document.querySelector('#root'));
- ReactDOM.render() 会根据第一个参数的类型不同执行不同的操作；
-
- 如果是组件，当 render 执行时，首先会把当前组件的行内属性进行打包封装，把其封装成一个对象，把这个对象传给组件函数
-
- 执行组件函数，获取对应的虚拟 DOM 对象
-
- 把虚拟 DOM 转成真实 DOM 对象，并且插入到真实的 DOM 中
2.2 React 的 class 组件
通过 class 定义一个组件
- 通过 class 来定义一个组件，需要继承 React 上的 Component 这个类
- 在定义组件上的原型上必须有一个 render 函数，且 render 函数需要返回一个顶级的 jsx 元素
-看
标签：总结,react,render,React,state,props,组件 From： https://www.cnblogs.com/beifeng1996/p/16856468.html