美文网首页
REACT 小书NOTE

REACT 小书NOTE

作者: Nico酱 | 来源:发表于2017-06-27 16:58 被阅读40次

    类似label标签的for属性,由于其是关键字,用htmlFor 代替

    JSX元素变量:可以像JavaScript对象那样自由的赋值给变量

    render(){
      const isGood = true;
      const goodWord = <div>is good</div>]
      const badWord = <div>bad </div>
      return (
      <div>
        {
          isGood?goodWord:badWord
        }
      </div>
      )
    }
    

    on*事件的监听只能用在普通的html标签上,不能用在组件标签上

    event对象: e.target.innerHTML ,关于事件中的this,react调用方法并不是用过对象的方式调用的(this.handleClick) 而是直接通过函数调用(handleClick) 所以以事件监听函数内并不能通过this获取到实例

    当调用setState的时候并不会马上修改state,而是把这个对象缓存到一个更新队列里面,稍后才会合并,类似下面的额

     handleClickOnLikeButton () {
        console.log(this.state.isLiked)
        this.setState({
          isLiked: !this.state.isLiked
        })
        console.log(this.state.isLiked)
      }
      //会发现两次均打印出false
    

    setState的第二种使用方式,接受一个函数作为参数

    handleClickOnLikeButton () {
        this.setState((prevState) => {
          return { count: 0 }
        })
        this.setState((prevState) => {
          return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0,当前返回 1
        })
        this.setState((prevState) => {
          return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1,当前返回 3
        })
        // 最后的结果是 this.state.count 为 3
      }
    

    默认defaultProps props一旦传入,不可以在组件内部对他进行修改

    state是让组件控制自己的状态 props是让外部对组件自己进行配置

    如果你往 {} 放一个数组,React.js 会帮你把数组里面一个个元素罗列并且渲染出来。

    对于用表达式套数组罗列到页面上的元素,都要为每个元素加上 key 属性,这个 key 必须是每个元素唯一的标识。

    类似于input /select /textarea 这些元素的value 值被react所控制,称为受控组件

    组件的挂载:reactJS将组件渲染,并且构造dom元素然后塞入页面的过程

    constructor()
    componentWillMount()//ajax异步获取数据
    render()
    componentDidMount()
    ...
    //即将从页面中删除
    componentWillUnmount()
    //从页面中删除
    

    关于ref : ref 这个属性是一个函数,此属性也可以用在组件上

    class AutoFocusInput extends Component {
      componentDidMount () {
        //通过this.input 获取到这个dom元素
        this.input.focus()
      }
      render () {
        return (
          <input ref={(input) => this.input = input} />
        )
      }
    }
    
    ReactDOM.render(
      <AutoFocusInput />,
      document.getElementById('root')
    )
    
    

    防止xss攻击,react会默认的将html转化为文本形式,如果需要传入动态的html,用到这个属性dangerouslySetInnerHTML

    ...
    render(){
      return(
        <div 
            className=""
            dangerouslySetInnerHTML={{__html:this.state.content}}
        />
      )
    }
    

    ==注意== style样式接受一个对象包含css属性的键值对,font-size 类型的需要换成fontSize 的驼峰结构

    属性类型控制

    static propTypes = {
      comment: PropTypes.object.isRequired
    }
    
    PropTypes.array
    PropTypes.bool
    PropTypes.func
    PropTypes.number
    PropTypes.object
    PropTypes.string
    PropTypes.node
    PropTypes.element
    

    ==规范== 私有方法以_ 开头命名

    组件的内容编写顺序如下:

    1. static 开头的类属性,如 defaultPropspropTypes
    2. 构造函数,constructor
    3. getter/setter(还不了解的同学可以暂时忽略)。
    4. 组件生命周期。
    5. _ 开头的私有方法。
    6. 事件监听方法,handle*
    7. render*开头的方法,有时候 render() 方法里面的内容会分开到不同函数里面进行,这些函数都以 render* 开头。
    8. render() 方法。

    高阶组件:是一个函数,传给他一个组件返回一个新的组件 起到装饰的作用

    export default (WrappedComponent) => {
      class NewComponent extends Component {
        // 可以做很多自定义逻辑
        render () {
          return <WrappedComponent />
        }
      }
      return NewComponent
    }
    

    实现 redux,

    stateChange,需要的参数为state,action ,根据不同的action,执行不同的命令 :source reducer

    createStore接受两个参数:状态state stateChanger :描述应用程序状态根据action发生变化

    function createStore (state, stateChanger) {
      const listeners = [];
       const subscribe = (listener)=>{listeners.push(listener)}
      const getState = () => state
       const dispatch = (action) => {stateChanger(state, action);
                                    listeners.forEach(listener=>listener())
                                    }
        //返回dispatch ,getstate可以获得state
       return { getState, dispatch,subscribe }
    }
    

    reducer 是不允许有副作用的。你不能在里面操作 DOM,也不能发 Ajax 请求,更不能直接修改 state,它要做的仅仅是 —— 初始化和计算新的 state

    如果没有传入 state 或者 statenull,那么它就会返回一个初始化的数据。如果有传入 state 的话,就会根据 action 来“修改“数据,但其实它没有、也规定不能修改 state,而是要通过上节所说的把修改路径的对象都复制一遍,然后产生一个新的对象返回。如果它不能识别你的 action,它就不会产生新的数据,而是(在 default 内部)把 state 原封不动地返回。

    createStore的使用套路

    //定义一个reducer
    function reducer(state,action){
      /*初始化state和switch action.type*/
    }
    //生成store
    const store = createStore(reducer)
    //监听触发重新渲染界面
    store.subscribe(()=>renderApp(store.getState()))
    //首次渲染
    renderApp(store.getState())
    //dispatch刷新
    store.dispatch(...)
    
    

    相关文章

      网友评论

          本文标题:REACT 小书NOTE

          本文链接:https://www.haomeiwen.com/subject/fymecxtx.html