web前端技术开发个人博客

可以看到，每次输入的时候都要点击一下输入框才能继续输入，即表示每次输入后输入框已经失去焦点了。 查阅相关资料后发现是因为 reactNode 的 key 设置不当引起的，开发过程中为了省事，直接生成 UUID 作为 reactNode 的 key 导致每次视图重新渲染之后都生成了一个新的reactNode，react 无法分辨新 reactNode 和旧 reactNode 之间的关系，所以引起失去焦点。 解决办法也很简单，最简单的办法就是将 key 设...

其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前。具体写法看下面3个例子。 例子1.这里如下图，用户邮箱为父，绿色框为子。 父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”，这两个名称随意起；再将...

入门级Demos 先来几个简单的demo体验一把。注意，例子里ES5的require请通过browserfiy或webpack来实现，如果你还不会用这两样东西，请出门后往前看。 “Hello,XXX”输出 ES5写法： var React = require('react'); var HelloMessage = React.createClass({ render: function() { return (<h1>Hello,{this.props.name}!</h1>); } }); module.exports = React.crea...

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上) ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下) React 示例项目 · 简易留言板 + 待办事项 React 设计思想

实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getInitialState componentWillMount render componentDidMount 存在期 组件已存在时的状态改变 componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate 销毁&清理期 componentWillUnmount 说明 生命周期共提供了10个不同的API...