react笔记

react和vue对比

相同

• react 和 vue 都有组件化思想 都有虚拟DOM
• react 和 vue 都提供了组件化视图 (compoisible) 响应式数据概念
• react 和 vue 都有核心渲染组件的API (Vue.component/React.createClass) 都有 路由的概念 相同的路由机制 完整对应的组件生命周期 各自成熟的生态圈

不同

• react 通过 javascript xml 来编写组件 vue 通过 template 模板来嵌套组件
• vue 比 react 有更快的渲染速度 react比较vue相对复杂的框架 react 适用用业务逻辑超级变态的项目
• 数据传递方式不一样 生命周期不一样 渲染模板不一样 {react} {{vue}}

特点

• 组件名首字母必须大写 任何组件都只有一个顶层标签
• render 组件生命周期钩子函数 把虚拟DOM 读取出JS内存 然后等待渲染成真实DOM
• 生命周期阶段 mount(载入) update(更新) unmount(销毁)
• 自定义函数 handleClick onClick={this.handleClick}
• 数据传递载体 组件通信 props(属性) state(状态)

jsx 语法规则

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析； 遇到代码块（以 { 开头），就用 JavaScript 规则解析

react书写样式

1. 基于class 但是 react 必须 className 代替class
2. 基于内联样式 style style = {obj} 遵循 驼峰命名 style = {backgroundColor:"red",fontSize:20} lineHeight:'20px' 必须带单位
3. 全局变量 外部样式 原型链挂载

state 状态 react 组件数据交互的载体 状态用来修改的

1. state 不能在组件外部定义 不能在组件外部 修改 只能在组件内部定义声明 只能在内部修改
2. state 用来被修改的 this.state 获取 state, this.setState() 来修改 state
3. state 在组件内部的 getInitialState 来初始化定义 state ,必须返回一个对象
4. state 修改 setState 这个方法会修改 state 会重新执行 组件内部的 render方法 , 会触发页面的 二次渲染 虚拟DOM 会根据react 的 diff 算法 得到新的虚拟DOM 最后的批量的更新

父组件如何修改子组件

• 父组件把组件的state 当着子组件的props 传递给子组件
• 父组件修改 state 会二次render 子组件接收到变化的 props 从而实现子组件修改

ref this.refs 对象获取

1. ref 作用于DOM 元素 指向这个真实的DOM元素
2. ref 作用于组件 指向这个组件对象

React基本语法

import React from 'react'    //引入React

class App extends React.Component{    //定义一个组件继承React.Component
    constructor (props){    //定义构造函数  初始化状态
       super(props)
       this.state = {
        solders:['a ','b','c']   
     }
    }
    render(){
        return <h1>hello {this.props.world} </h1>
    }
}  

function com(){
    return <h1>函数式声明组件<h1/>
}

//修改状态this.setState()
add(){
    this.setState({ solders:[...this.state.solders,'d']});   //解构 并传入
}
<button    onClick = {this.add}></button>   //这里面add函数的this 不是指向组件，所以setState函数找不到
解决 在构造函数中  this.add = this.add.bind(this);

 Redux默认只处理同步，异步任务需要react-thunk

安装redux 
npm install redux --save

import  { createStore } from 'redux'   这个函数用来创建store
import { counter,addGUN,removeGUN } from './index.redux.js'   //导入自己写的reducer和action

let store = createStore(counter);   //创建store
 
function render(){     //传入一个store，和addGUN，removeGUN，给组件，组件可以通过addGUN修改store
    ReactDOM.render(<App store={store} addGUN={addGUN} removeGUN={removeGUN}/>,document.getElementById('root') )
}
render();
store.subscribe(render);   //订阅，当组件的store（状态）发生改变时，执行render()
//组件内部 store.dispatch(addGUN( ))

----------------------------------安装 redux-thunk
npm install redux-thunk --save
导入 redux 中间件辅助函数
import { createStore , applyMiddleware } from './index.redux'
导入 thunk 
import thunk from 'redux-thunk'

第一步 ： 新建store时， 传入applyMiddleware ( thunk )
const store = createStore(counter, applyMiddleware( thunk ) ); 
第二步，编写异步函数
export     function    addGunAsync(){
    return function(dispatch){      //返回一个函数,异步回调addGUN
        setTimeout(()=>{
            dispatch(addGUN());
        },2000)
    }
}

 引入redux devtools 开发者工具(拓展程序)

//多引入一个compose
import {createStore , applyMiddleware , compose} from 'redux' 

const reduxDevtools = window.devToolsExtension? window.devToolsExtension() :f=>f
//判断是否有window.devToolsExtension 

const store = createStore(counter,compose(
    applyMiddleware(thunk),
    reduxDevtools
))   //创建store时传入 reduxDevtools

 react-redux 优雅的结合react 和 redux （）

第一步：安装react-redux
npm install react-redux --save
第二步：使用react-redux 
    import { Provider } from 'react-redux'  //引入Provider
第三步：使用Provider和Connect 忘记 store.subscribe
     ①Provider组件在应用最外层，传入store
       ReactDOM.render(
    <Provider store={store}>    // store传入Provider，用Provider组件把App包起来，
        <App/>      //删除所有传入函数(addGUN()等)
    <Provider />
    ,document.getElementById('root') )
     ②Connect 负责从外部获取组件需要参数，Connect 可以用装饰器的方式来写
    在app.js引入Connect
    import { Connect } from 'react-redux'
    import { addGUN,removeGUN} from './index.redux.js'

    const mapStateProps(state){    
          return {num:state}
    }
    const actionCreators = { addGUN, removeGUN }   向App传入action
    App = connect( mapStatetoProps , actionCreators )(App)     //把App 传入，返回新的App
    connect 方法两个参数：第一个你需要把什么属性放在props里面
                  第二个你要什么方法。放到props里面，自动dispatch