不难懂--------react笔记

 

 

        是一个生命周期函数，用来存放当前组件所需要的一些状态  状态存放在this.state中这个类中的this指向会指向当前这个组件

    React中的事件绑定优化

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

        

 

 

 

 

 

一、immutable简介

    Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗。

　　

　　在js中，引用类型的数据，优点在于频繁的操作数据都是在原对象的基础上修改，不会创建新对象，从而可以有效的利用内存，不会浪费内存，这种特性称为mutable（可变），但恰恰它的优点也是它的缺点，太过于灵活多变在复杂数据的场景下也造成了它的不可控性，假设一个对象在多处用到，在某一处不小心修改了数据，其他地方很难预见到数据是如何改变的，针对这种问题的解决方法，一般就像刚才的例子，会想复制一个新对象，再在新对象上做修改，这无疑会造成更多的性能问题以及内存浪费。

  为了解决这种问题，出现了immutable对象，每次修改immutable对象都会创建一个新的不可变对象，而老的对象不会改变

 

 

var App = React.createClass({})

当this.state 或者this.props发生改变的时候render函数就会执行

修改数据通过this.setState(参数1,参数2)this.setState是一个异步函数

参数1: 是需要修改的数据是一个对象，    

参数2: 是一个回调函数，可以用来验证数据是否修改成功，同时可以获取到数据更新后的DOM结构 等同于componentDidMount

this.setState中的第一个参数除了可以写成一个对象以外，还可以写成一个函数，函数中第一个值为prevState 第二个值为prePprops    

this.setState((prevState,prop)=>({}))

组件名称.defaultProps={

        key:val

    }

组件名称.propTypes={

            key:propTypes.类型

        }

HashRouter

Link和 NavLink是进行路由的跳转。区别是当选中标签的时候NavLink会加上一个class

Swicth:被Switch包裹的Route渲染的时候只会渲染一个路径，建意：子页面不要放在Switch里面，主页面放在Switch里面

    1、<Route path="/home"component={组件名称}></Route>

    2、<Route path="/home" render={()=>{return<Home/>}}></Route>

     <Router path="/one/:id" render={(history)=>{

      return <One history={history}/>

    <NavLikn to={"/one/"+1}>one<NavLink>

this.props.history.push('/one/'+'1')

constructor({history,location,match}){

            console.log(match.params)}

 

           return <One history={history}/>

        <NavLikn to={{pathname:"/one",query:{data:1}}}>one<NavLink>

this.props.history.push({ pathname :'/one',query : { data:1} })

this.props.location.query.data

this.props进行接受即可。

this.props.history.push("需要跳转的路径")；跳转路径

this.props.history.back();返回

this.props.history.forward():前进

this.props.history.replace():替换

(1)、组件创建的过程

    constructor

(2)当props中的数据发生改变后会执行哪些生命周期函数

(3)组件销毁的时候

this.foreUpdate()

state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

虚拟DOM：虚拟DOM其实就是真实的js对象虚拟DOM提高了react的性能，每次数据更新后都会重新计算上虚拟DOM，并和上一次的虚拟DOM进行对比，对方法变化的部分进行批量更新。react中也提供了

shouldComponentUpdate生命周期的回调，来减少数据变化后不必要的虚拟DOM对比过程。保证性能

https://www.cnblogs.com/nanianqiming/p/9870194.html

由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数

staticgetDerivedStateFromProps(nextProps, prevState){}用于替换componentWillReceiveProps，可以用来控制 props 更新 state的过程；它返回一个对象表示新的 state；如果不需要更新，返回null即可在每次渲染之前都会调用，不管初始挂载还是后面的更新都会调用，这一点 和componentWillReceiveProps不同（只有当父组件造成重新渲染时才调用） 每次都应该返回一个对象作为

   函数中的错误，就像使用了trycatch，不会将错误直接抛出了，保证应用的

1、componentWillUnmount

2、constructor

5、componentDidMount

通过this.props.children

1、单一的数据源

2、state是只读的

3、使用纯函数来进行修改redux中有

3个常用的方法  

1、createStore()       创建store

2、combineReducers()   合并多个reducer

3、applyMiddleware()   使用中间件，处理异步的action

    当组件需要改变Store数据的时候。需要创建一个Action,然后通过dispatch(action) 传递给Store，然后Store把Action转发给Reducers.Reducers会拿到previousState(以前的state

数据) 和action。然后将previousState和action进行结合做新的数据(store)修改。然后生成一个新的数据传递给Store 。Store通过触发subscribe()这个方法来调用函数执行setState使得view的视图发生改变

2个参数一个是state一个是action。state用来保存公共的状态，state有一个特点就是只允许读不允许进行修改 。在实际开发中因为会涉及到多人协作开发所以每个模块都会有一个reducer。

004、请说下你对高阶组件的理解，以及作用高阶组件就是接受一个组件作为参数，返回一个相对增强性的组件的函数高阶组件是一个函数 并不是组件

，然后重新创建该组件（有状态组件的constructor和componentWillUnmount都会执行）

this.state

this.props

当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用

Context来实现跨层级的组件数据传递,使用context可以实现跨组件传递

旧版context的基本使用

  1、getChildContext根组件中声明，一个函数，返回一个对象，  就是context

  2、childContextTypes根组件中声明，指定context的结构类型， 如不指定，会产生错误

  3、contextTypes子孙组件中声明，指定要接收的context的结构类型， 可以只是context的一部分结构。contextTypes没有定义，context将是 一个空对象。

  4、this.context在子孙组件中通过此来获取上下文

context的基本使用

    1、根组件引入GlobalContext，并使用GlobalContext.Provider（生产者）

    2、组件引入GlobalContext并调用context，使用GlobalContext.Consumer

011、谈谈你对react中withRouter的理解默认情况下必须是经过路由匹配渲染的组件在

this.props上拥有路由参数，才能使用编程式导航的写法，withRouter是把不是通过路由切换过来的组件，将react-router 的 history、location、match 三个对象传入props对象上

012、说以下你对puerComoponent的理解pureComponent表示一个纯组件，可以用来优化react程序。减少render函数渲染的次数。提高性能

pureComponent进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致

好处：当组件更新时，如果组件的props或者

state都没有改变，render函数就不 会触发。省去虚拟DOM的生成和对比过程，达到提升性能的目的。具体原因是因为react自动帮我们做了一层浅比较

如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载React异步渲染开启的时候，componentWillMount 就可能被中途打断，中断之后渲染又要重做一遍，如果在componentWillMount 中做 AJAX 调用，代码里看到只有调用一次，但是实际上可能调用 N 多次，这明显不合适。相反，若把 AJAX 放在componentDidMount，因为 componentDidMount 在第二阶段，所以绝对不会多次重复调用，这才是 AJAX 合适的位置

return ( <List key = '1'/>);

 

 

        const[count,setCount] = useState(0);

        const state = useState(0);

        const count = state[0];

        const setCount  = state[1]

    注意：

export default()=>{

    let[count,setCount] = useState(0);

      let[count,setCount] = useState(0);

      let[count,setCount] = useState(0);

    }

importReact,{useState,useEffect}from"react"

export default()=>{

    let[title,setTitle] = useState(0);

    letupdateTitle =()=>setTitle(title+1);

    return(

        <div>

            <h2>{title}</h2>

            <button onClick={updateTitle}>点击</button>

        </div> )

    useEffect(()=>{

        document.title =`页面为${count}`;

    }

import React,{useState,useEffect} from"react" export default()=>{

    let[title,setTitle] = useState(0);

    let updateTitle =()=>setTitle(title+1);

    return(

        <div>

            <h2>{title}</h2>

            <buttononClick={updateTitle}>点击</button>

        </div>

()=>{document.title =`页面为${count}`;    },[])}

useEffect =(()=>{

    return()=>{

        //unmount时调用这里

        document.removeEventListener();

axios("http://xxx/xxx.json？a=123'").then((res)=>{

     consol.log(res)//这里的r是响应结果})

fetch("http://www.baidu.com").then((res)=>{

        console.log(res);//是一个综合各种方法的对象，并不是请求的数据