React起手-组合vs继承

当然,React也是提倡组合优于继承的,这里对一些新手来说,往往他们喜欢用继承,我们来看一下如果用组合来更好的来解决问题吧~ 这里的这个例子所实现的功能,当时用vue1实现的时候特别困难,如今vue2应该也支持了相应的功能,不过当我看到入门文章的这里的时候,我感觉这是React很强大的地方,简单来说就是,可以进行依赖注入,注入什么呢?当然什么都可以,这就给UI组件强大的灵活能力,即父组件只用实现那些不变的部分,那些变化的部分我只需要抽取出来行程单独的子组件,这样父组件在不知道他内部某些部分是什么样子的时候就可以进行抽象。 还是先看例子来理解一下: function FancyBorder(props) { return ( <div className= »

React起手-提炼状态

官方文档叫Lifting State up,不知道我翻译的是否妥当,哈哈哈。 组件之间的数据有些肯定是共享的,也就是说这个共享数据不管在什么地方被改变了,所有组件都要及时的反应到自身上,官方推荐提炼共有状态到他们最近的祖先上。举个例子来理解这个东东,例如有个温度计,当温度到100以上时候水开,反之不开。 function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The »

React起手-表单

对于表单的处理,react的处理和原生很相像,所以没有什么多说的,就是看例子吧~ 以下就是input, textarea, select的用法,其实都一样,把state的值挂载到相应位置的value上,并且监听相应的事件即可,注意事件的写法onChange驼峰哦。回调函数的第一个参数是event哦,原生event对象可以做一些例如消除默认行为和停止冒泡的事情。这些被控制的组件叫做controlled components。 然后你会发现这也太麻烦啦,每一个表单控件我都得写一个handler区处理它,这样的话不仅麻烦而且和原生代码以及非react得库难以整合,所以有uncontrolled components, 来改善这一情况,会另起文章来记录~ class NameForm extends React. »

React起手-列表渲染

列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( < »

React起手-事件处理

React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而且如果你想拿到事件对象event,这个对象是React按照w3c标准完成的,所以不用担心浏览器的兼容性,可以像如下这样: function ActionLink() { function handleClick( »