Tagged

React

A collection of 8 posts

React

React 组件生命周期函数里 setState 调用分析

注:本文是阅读《深入React技术栈》的一些心得,一部分内容和图片是直接摘抄自此书。 React 组件的生命周期函数是 react 的基础知识,如果有不熟悉的可以看官方文档。简单总结如下。 组件的生命周期函数分为两类:挂载或卸载过程 / 组件更新时。挂载或卸载过程涉及到三个函数:componentWillMount - 组件即将挂载、componentDidMount - 组件挂载完成、componentWillUnmount - 组件即将卸载。这些函数都只会在组件初始化或者卸载时运行一次。 组件更新时涉及到四个函数: shouldComponentUpdate - 判断组件是否需要更新、componentWillUpdate - 组件即将更新、componentDidUpdate - 组件完成更新、componentWillReceiveProps - 组件即将接收新的 props。 生命周期整体流程图 - 图片来自于《深入React技术栈》 setState 更是基础的不能再基础的知识了,用来更新组件的状态。需要注意的是 setState 是一个异步方法,一个生命周期内所有的

[译] 理解 React-redux connect
React

[译] 理解 React-redux connect

Redux 是一个非常简单库,主要目的是进行状态管理,它使得 React 开发变得更加容易。然鹅很多人都只是简单的使用 Redux 官网提供的样板代码,把它和 React 应用结合起来,却并不理解这两者到底是如何结合并且运作的。 有一个库叫做 React-redux,它唯一的目的就是把 redux 的状态管理机制无缝衔接到 react 应用上。我认为当使用了一些构成了你应用核心的东西的时候,还是非常应该了解具体发生了什么的。 React 和 redux 本身 对于某些人来说,也许很难相信 redux 和 react 实际上是两个独立的库这件事情,它们完全可以独立使用。 我们先来看一下 redux 的状态(state)管理机制: 如果你之前曾经使用过 redux,你就知道 redux 主要是围绕着 "store" 来运转的,它的 store 就是用来保存应用里所有的

React

React起手-组合vs继承

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

React

React起手-提炼状态

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

React

React起手-表单

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

React

React起手-列表渲染

列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') ); 基础列表组件的构造中,有一个重要的属性值key需要你进行指定,这个很重要,和帮助框架进行性能优化有关,具体深入原因后续会继续了解,先来看例子: function NumberList(props) { const numbers = props.numbers; const listItems

React

React起手-事件处理

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

React

React起手-条件渲染

可以根据state的值进行组件的条件渲染。例如: function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } ReactDOM.render( // Try changing to isLoggedIn={true}: <Greeting isLoggedIn={false} />, document.getElementById('root') ); 你还可以用变量去存储组件,以便进行条件筛选,使得渲染函数的返回值更加清爽,例如: class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.