前端开发react和redux的学习

疯狂前端开发讲义 下载
前端开发手册下载
web前端开发手册下载

React组件

1) es6的class类可以看作是构造函数的一个语法糖,
2) extends实现了类之间的继承,组件的生命周期函数就是从这来的
3) constructor是构造器,在实例化对象时调用,
4) super调用了父类的constructor创造了父类的实例对象this,然后用子类的构造函数进行修改

有三点值得注意:
1、定义类名字的首字母必须大写
2、因为class变成了关键字,类选择器需要用className来代替。
3、类和模块内部默认使用严格模式,所以不需要用use strict指定运行模式。

组件的生命周期

组件在初始化时会触发5个钩子函数:
1、getDefaultProps()
// 设置默认的props,也可以用dufaultProps设置组件的默认属性。
2、getInitialState()
// 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props。
3、componentWillMount()
// 组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。
4、 render()
// react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
5、componentDidMount()
// 组件渲染之后调用,可以通过this.getDOMNode()获取和操作dom节点,只调用一次

在更新时也会触发5个钩子函数:
6、componentWillReceivePorps(nextProps)
// 组件初始化时不调用,组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)
// react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。
8、componentWillUpdata(nextProps, nextState)
// 组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state
9、render()
10、componentDidUpdate()
// 组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。
11、componentWillUnmount()
// 组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

React-Router路由

Router就是React的一个组件,它并不会被渲染,只是一个创建内部路由规则的配置对象,根据匹配的路由地址展现相应的组件。
Route则对路由地址和组件进行绑定
Route可以向绑定的组件传递7个属性:children,history,location,params,route,routeParams,route
children(以路由的包涵关系为区分的组件)
location(包括地址,参数,地址切换方式,key值,hash值)
当页面比较多时,初次渲染的速度就会很慢,react配合webpack进行按需加载,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFilename。
javascript 代码

const chooseProducts = (location, cb) => {
    require.ensure(
        [],
        (require) => {
            cb(null, require(‘../Component/chooseProducts’).default)
        },
        ‘chooseProducts’,
    )
}
const helpCenter = (location, cb) => {
    require.ensure(
        [],
        (require) => {
            cb(null, require(‘../Component/helpCenter’).default)
        },
        ‘helpCenter’,
    )
}
const saleRecord = (location, cb) => {
    require.ensure(
        [],
        (require) => {
            cb(null, require(‘../Component/saleRecord’).default)
        },
        ‘saleRecord’,
    )
}
const RouteConfig = (
    <Router history={history}>
        <Route path=”/” component={Roots}>
            <IndexRoute component={index} />
            //首页
            <Route path=”index” component={index} />
            <Route path=”helpCenter” getComponent={helpCenter} />
            //帮助中心
            <Route path=”saleRecord” getComponent={saleRecord} />
            //销售记录
            <Redirect from=”*” to=”/” />
        </Route>
    </Router>
)

组件之间的通信

组件层级嵌套到比较深,可以使用上下文getChildContext来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.context直接访问。
兄弟关系的组件之间无法直接通信,它们只能利用同一层的上级作为中转站。而如果兄弟组件都是最高层的组件,为了能够让它们进行通信,必须在它们外层再套一层组件,这个外层的组件起着保存数据,传递信息的作用,这其实就是redux所做的事情。
组件之间的信息还可以通过全局事件来传递。不同页面可以通过参数传递数据,下个页面可以用location.param来获取。其实react本身很简单,难的在于如何优雅高效的实现组件之间数据的交流。

Redux

redux并不是必须的,它的作用相当于在顶层组件之上又加了一个组件,作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信
react-redux提供了connect和Provider两个好基友,它们一个将组件与redux关联起来,一个将store传给组件。组件通过dispatch发出action,store根据action的type属性调用对应的reducer并传入state和这个action,reducer对state进行处理并返回一个新的state放入store,connect监听到store发生变化,调用setState更新组件,此时组件的props也就跟着变化。
connect,Provider,mapStateToProps,mapDispatchToProps是react-redux提供的,redux本身和react没有半毛钱关系,它只是数据处理中心,没有和react产生任何耦合,是react-redux让它们联系在一起。
redux以及react-redux到底是怎么实现的

先说说redux:
redux主要由三部分组成:store,reducer,action。
store是一个对象,它有四个主要的方法:
1、dispatch:
// 用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造,比如当action传入dispatch会立即触发reducer,有些时候我们不希望它立即触发,而是等待异步操作完成之后再触发,这时候用redux-thunk对dispatch进行改造,以前只能传入一个对象,改造完成后可以传入一个函数,在这个函数里我们手动dispatch一个action对象,这个过程是可控的,就实现了异步。
2、subscribe:
// 监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化,当我们需要知道state是否变化时可以调用,它返回一个函数,调用这个返回的函数可以注销监听。
let unsubscribe = store.subscribe(() => {console.log(‘state发生了变化’)})
3、getState:
// 获取store中的state——当我们用action触发reducer改变了state时,需要再拿到新的state里的数据,毕竟数据才是我们想要的。getState主要在两个地方需要用到,一是在dispatch拿到action后store需要用它来获取state里的数据,并把这个数据传给reducer,这个过程是自动执行的,二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据,如果做到这一步,说明我们已经成功了。

前端开发从哪里下载素材
web前端开发最佳实践 pdf下载
web前端开发修炼之道 下载
» 本文来自:前端开发者 » 《前端开发react和redux的学习》
» 本文链接地址:https://www.rokub.com/7997.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!