1. 前言
函数组件 和 类组件是
react的基础 ,非常重要这里简单梳理一下
2.渲染函数
这里 用了
es6的继承, 非常简单可以看看
render渲染函数 返回布局 注意retuen不要忘了
// C大写!!! 写错了等于继承undefined 会报错 class App extends React.Component { // 绘制:返回组件的布局 render() { console.log("渲染 render") return ( <div> <h1>hello 我是Appp</h1> </div> ) } } ReactDOM.render(<App />, app);
3.传参
构造函数 代码执行顺序
1.先走构造函数,进行数据的初始化
- 再走
render函数,布局 ,都是数据驱动嘛 有数据才能去布局界面
super调用父类
class App2 extends React.Component { constructor() { super(); // this.props = { name: name} //父类做了 console.log("1 constructor app"); } render(s) { // 这里是没有参数的 console.log("s------", s)//undefined // this.props:是个对象,保存的是使用组件传递过来的值 console.log(" 2 render...", this.props); return ( <div> <h1> hello react {this.props.name}------ {this.props.text} </h1> </div> ); } } ReactDOM.render(<App2 name="易经" text="天行健" />, app2);
4. 类组件和 函数组件传参的对比
类 是通过
this.props.属性函数是直接
props.属性
5. 时钟案例 ----时间实时显示
日期对象转为字符串 为什么可以调用toString()方法
class ClockComponent extends React.Component { render() { console.log("render...", this); return ( <div> {/* 不能直接渲染 对象 所以 需要把 日期对象转为 字符串 */} <p> {new Date().toString()}</p> </div> ); } } // 一直刷 定时器 但是效率不好 因为不停的创建组件 // 因为不需要每次都创建表只需要每次更新数据就行 setInterval(() => { ReactDOM.render(<ClockComponent />, box); }, 1000);
6.总结
1.函数组件结构简单：
2.函数组件是一个
纯函数，接收一个props对象返回一个react元素3.函数组件没有生命周期和状态state
1.类组件继承
React.Component2.类组件创建
render函数返回react元素3.类组件有
生命周期和constructor
