1.前言
书接上文的实时 ,时实时间显示的案例，肯定有很多疑问,解答一部分，寻寻渐进来
2.state
熟悉
vue的话 可以把 这个暂时理解成vue里面的data
2.1 定义状态对象 方式 -1
直接 类里面定义
class ClockComponent extends React.Component { //方式1: 定义状态对象 // state = {value:100}; constructor() { super(); }
2.2 定义状态对象-2
构造函数里定义
this也等价于vue里面的 实例对象
this.state等价vue this.data用法
constructor() { super(); console.log("1 constructor") // 自定义属性 this.age = 108; // 这里的this和 render里的this是一样的 // react规定好的命名! state vue必须写到data this.state = { number: 666, time: new Date().toString() }; }
3. render
接着上面的代码
总结了几种写法
这里开始 陆续开始使用解构赋值了
render() { console.log("2 render ") console.log(this.props, this.state, this.age); // let name = this.props.name; // es6解构赋值 let { name } = this.props; // let {name,age} = {name:"李白"}; let { time } = this.state; return ( <div> <p id="timeElement"> {name}--{this.age}--{time} </p> </div> ); }
4. 钩子函数---componentDidMount
类似
vue的mounted DOM渲染完毕
vue中create和mounted做的事情,都在这个函数里完成
4.1 错误 修改 state
注意 的是不能直接修改
this.time = "测试 this.state.time = "测试...";
可以修改,但是不刷新!!!
并不会更新
vue可以,但是react不行
4.2 正确修改state
只有
setState方法react才能监听到界面改变,绘制界面--执行render
componentDidMount() { console.log("3 componentDidMount", timeElement); this.setState({ time:"测试..." }); }
4.3 时钟实时更新
作用域问题 ,这个章节 目前 只能用箭头函数,你也可以尝试其他方式
componentDidMount() { console.log("3 componentDidMount", timeElement); // 用箭头函数 !!! componentDidMount this.timerId = setInterval(() => { // this === 上层作用域的this this.setState({ time: new Date().toString() }); }, 1000); }
4.4 钩子componentWillUnmount-- 关闭 时钟
componentWillUnmount组件消失的时候调用
componentWillUnmount() { clearInterval(this.timerId); }
5. 属性默认值
这是默认属性:这个对象会同步到组件里this.props里
使用组件的时候 name属性不填写 会使用这个默认值
ClockComponent.defaultProps = { name: "张三丰" };
6. 核心代码
class ClockComponent extends React.Component { constructor() { super(); console.log("1 constructor") this.age = 108; this.state = { number: 666, time: new Date().toString() }; } render() { console.log("2 render ") console.log(this.props, this.state, this.age); let { name } = this.props; let { time } = this.state; return ( <div> <p id="timeElement"> {name}--{this.age}--{time} </p> </div> ); } componentDidMount() { console.log("3 componentDidMount", timeElement); this.timerId = setInterval(() => { // this === 上层作用域的this this.setState({ time: new Date().toString() }); }, 1000); } // 组件消失的时候调用 componentWillUnmount() { clearInterval(this.timerId); } } ClockComponent.defaultProps = { name: "张三丰" }; ReactDOM.render(<ClockComponent />, box);
7. 执行顺序
- 构造函数
constructor- 渲染函数
render- 钩子函数
componentDidMount
8.总结
1.
props:传递数据 (上→下),只能用,不能改
state:状态,修改状态,界面可以重新绘制2.
constructor自定义属性 this.age = 108;
状态 this.state = {}
3.钩子函数
4.修改值
this.setState({})
