DaftJayee的博客

一、目录结构src| store| index.js reducer.js Home.js二、Home.js中：constructor(props){ super(props); this.state = store.getState(); store.subscribe(this.changeStateStr.bind(this)) //监听是否有action提交，若有则触发括号中的函数 } render () { return ( <

一、目录结构src| store| index.js reducer.js Home.js 二、index.js:import { createStore } from 'redux';import reducer from './reducer';const store = createStore(reducer);export default store;三、reducer.jslet dataState = { str:"==这是仓库中的数据=="

1》通过id形式传值传值： <Link to='/news/张三'>新闻</Link>路由中： path='/news/:id'接收： this.props.match.params.id2》通过to形式传值传值： render: <Link to={{ pathname:'/news', query:{ strNews:"数据过去没？" } }}>新闻</Link> **pathname：路

router.js:import React from 'react';import {BrowserRouter,Route,Redirect,Switch} from 'react-router-dom';import Home from './Home'import List from './List'import News from './News'const RouterLink = ()=>( <BrowserRouter> <Switch&g

1》下载 npm install react-router-dom --save2》引入（配置） import {HashRouter,Route} from 'react-router-dom'; HashRouter : 路由的大组件 ***http://localhost:3000/#/ BrowserRouter（比起上面这个路径中去掉了#） ***http://localhost:3000/ Route : 组件的配置项 path :访问的路径

react中的生命周期1》什么是生命周期？ 其实生命周期是函数，react这个“身体”所经历的几个阶段 ***组件都有生命周期2》生命周期都有哪些？****》componentWillMount : 渲染（render）之前componentDidMount : 渲染（render）之后这两个生命周期函数均只执行一次****修改》componentWillReceiveProps : 父组件如果没有子组件不执行（第一次），有了子组件才会执行shouldComponentU

1》注释符单行：{ // }多行：{/**/}2》class ==〉className<input id='userName' className='bg-input' type='text' value={this.state.inputValue} onChange={this.getVal.bind(this)} />3

组件的通信1》父组件的内容 传递到 子组件 父组件： 自定义标签属性：key={val} 子组件： {this.props.key}2》子组件的内容 传递到 父组件 子组件使用父组件的函数，通过参数的形式传递...

import React, { Component } from 'react';class App extends Component { constructor(props){ super(props); this.state = { inputValue:'', list:[] } } render() { return ( <div> <input typ

import React, { Component } from 'react';class App extends Component { constructor(props){ super(props); this.state = { inputVal:'' } } render () { return ( <div> <input type='text' valu

一、添加事件<div onClick onChange ... //注意要写成驼峰形式二、修改this指向onClick={this.xxx.bind(this)}或者：在constructor中加this.btn = this.btn.bind(this);三、修改state数据this.setState(()=>{ return { key:val }})...

import React, { Component } from 'react';class App extends Component { constructor(props){ super(props); this.state = { str:'这是react数据', num:1, inputValue:"这是val", arr:['a','b','c'], cityName:['北京','上海','四川'] } } ren