![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
c
then啥
这个作者很懒,什么都没留下…
展开
-
利用react的state机制实现钟表计时器
涉及:state、生命周期钩子 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( ...转载 2019-01-17 10:11:13 · 1374 阅读 · 0 评论 -
react中setState的隐患
隐患出处:setState异步更新状态https://ruby-china.org/topics/32715https://www.jianshu.com/p/c6257cbef1b1 浅合并(shallow merge):当调用setState修改组件状态时,只需要传入发生改变的State,而不是组件完整的State如:return {...state, orders: **...转载 2019-01-17 11:21:23 · 610 阅读 · 0 评论 -
有border-radius的div做hover
需要在整个最外层上加overflow: hidden才有效原创 2019-01-17 10:11:35 · 292 阅读 · 0 评论 -
多余文字隐藏,悬浮显示
width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover{ overflow: visible; }原创 2019-01-17 10:12:03 · 1110 阅读 · 0 评论 -
受控组件与非受控
受控:通过state与onChange控制class Form extends Component { constructor() { super(); this.state = { name: '', }; } handleNameChange = (event) => { this.setState({ name: eve...原创 2019-01-18 11:18:08 · 650 阅读 · 0 评论 -
react中es6的使用
1. class创建组件class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}2. 声明默认属性class Greeting extends React.Component { // ...}G...转载 2019-01-18 15:23:46 · 2327 阅读 · 0 评论 -
react协调算法(页面更新机制)
对比算法:当对比两棵树时,React首先比较两个根节点。根节点的type不同,其行为也不同 1. 不同类型的元素:卸载(销毁旧的节点及状态)旧的元素重建新的元素<div> <Counter /></div><span> <Counter /></span>2. 相同类型元素:对比属性,仅更新变...转载 2019-01-18 16:18:14 · 775 阅读 · 0 评论 -
react子组件如何通过父组件传入的函数,将自己的值再传回父组件
class Son extends React.Component { render() { return <input onChange={this.props.onChange}/>; }}class Father extends React.Component { constructor() { super(); this.state ...转载 2019-01-24 16:39:29 · 759 阅读 · 0 评论