React

元素渲染

reactDOM.render  渲染
react元素是不可突变的

事件处理

1.驼峰命名
2.不能通过return false 来阻止默认事件等
3.this 丢失的问题 通常在构造器中 bind绑定
 -> 如果给一个箭头函数 回调被作为 prop(属性) 传递给下级组件,这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定,以避免这类性能问题。

组件和属性

组件:1.函数式组件 也叫无状态组件  高性能
     2.类组件 class
     3.组件必须返回一个单独的根元素
props:1.props是只读的 禁止修改

状态和生命周期

state:本地状态
    注意点:
    1.不要直接修改state
    2.更新可能是异步的
    3.更新会被合并
生名周期:
    初始化/实例化
    1.即将挂载 componentWillMount
    2.渲染组件  render
    3.挂载完毕 componentDidMount
    更新
    4.是否更新 shouldComponentUpdate 
    5.即将更新 componentWillUpdate
    6.渲染组件 render
    7.描画结束 componentDidUpdate
    卸载
    8.即将卸载 componentWillUnmount

列表渲染

使用数组的map方法来列表渲染,最好是要绑定key 便于react内部做标记

状态提升

在 React 中,共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。
升级版的解决方案是
    redux 状态管理

redux

操作流程:
1. {createStore} from 'redux'
2. 生成默认state defaultState={}
3.  创建reducer 
    const reducer = (state=defaultState,action)=>{
        let {type,payload}=action
        swtich type
            case XXXXX
            更新copy后的state  Object.assign(空,老,新)
        default:
            return state
    }
4. 创建store对象
    store = createStore(reducer,defaultState)

5. store传递给组件
    <组件名 store={store}/>

6. 更新,状态获取
    组件内部:   this.props.store== store
        this.props.store.dispatch({type:xxx,payload:ooo}) 发送action给reducer
        this.props.store.subscribe(回调)  订阅 state  更新state时触发
        this.props.store.getState() 获取状态,执行一次

router 4.x

区别:
    V4
        嵌套式路由(路由配置在组件内部),动态路由,包容性(多路由渲染)
        舍去了路由钩子
    V3
        分离式(统一位置配置),静态路由,排他性(只有一个路由被渲染

BrowserRouter 使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步

分类: React

发表评论

电子邮件地址不会被公开。