7 |
11 | 
12 |
13 |
14 | )
15 | }
16 | }
17 | export default TestCss
--------------------------------------------------------------------------------
/src/boundaries/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class ErrorBoundary extends React.Component{
3 | constructor(props) {
4 | super(props)
5 | this.state = {hasError: false}
6 | }
7 |
8 | componentDidCatch (error, info) {
9 | this.setState({
10 | hasError: true
11 | })
12 | console.log(error, info)
13 | }
14 |
15 | render() {
16 | if (this.state.hasError) {
17 | return 有些组件出问题了啊
18 | } 19 | return this.props.children 20 | } 21 | } 22 | export default ErrorBoundary -------------------------------------------------------------------------------- /src/transition/transition.css: -------------------------------------------------------------------------------- 1 | .example-enter { 2 | opacity: 0.01; 3 | } 4 | 5 | .example-enter.example-enter-active { 6 | opacity: 1; 7 | transition: opacity 500ms ease-in; 8 | } 9 | 10 | .example-leave { 11 | opacity: 1; 12 | } 13 | 14 | .example-leave.example-leave-active { 15 | opacity: 0.01; 16 | transition: opacity 300ms ease-in; 17 | } 18 | 19 | 20 | .example-appear { 21 | opacity: 0.01; 22 | } 23 | 24 | .example-appear.example-appear-active { 25 | opacity: 1; 26 | transition: opacity .5s ease-in; 27 | } -------------------------------------------------------------------------------- /src/redux-test/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import LinkInfo from './../container/LinkInfo' 3 | import {VisibilityFilters} from './../actions' 4 | class Footer extends React.Component{ 5 | render () { 6 | return( 7 |
8 |
9 | Show:
10 |
11 |
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Footer
--------------------------------------------------------------------------------
/src/redux/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FilterLink from '../containers/FilterLink'
3 |
4 | const Footer = () => {
5 | return (
6 |
7 | Show:
8 | {' '}
9 |
9 |
10 | 
11 |
13 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/src/redux/actions/index.js:
--------------------------------------------------------------------------------
1 | import http from './../../utils/http'
2 | // http.get('/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA').then(res => {
3 |
4 | // })
5 | let nextTodoId = 0
6 | export const addTodo = text => {
7 | let id = nextTodoId++
8 | console.log('id', id)
9 | return {
10 | type: 'ADD_TODO',
11 | id,
12 | text
13 | }
14 | }
15 |
16 | export const setVisibilityFilter = filter => {
17 | return {
18 | type: 'SET_VISIBILITY_FILTER',
19 | filter
20 | }
21 | }
22 |
23 | export const toggleTodo = id => {
24 | return {
25 | type: 'TOGGLE_TODO',
26 | id
27 | }
28 | }
--------------------------------------------------------------------------------
/src/redux/containers/FilterLink.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { setVisibilityFilter } from '../actions'
3 | import Link from './../components/Link'
4 |
5 | const mapStateToProps = (state, ownProps) => {
6 | return {
7 | active: ownProps.filter === state.VisibilityFilter
8 | }
9 | }
10 |
11 | const mapDispathToProps = (dispatch, ownProps) => {
12 | return {
13 | onClick: () => {
14 | dispatch(setVisibilityFilter(ownProps.filter))
15 | }
16 | }
17 | }
18 |
19 | const FilterLink = connect(
20 | mapStateToProps,
21 | mapDispathToProps
22 | )(Link)
23 |
24 | export default FilterLink
--------------------------------------------------------------------------------
/src/liferecycle/createRef.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class MyCreateRef extends React.Component{
3 | constructor(props) {
4 | super(props)
5 | this.inputRef = React.createRef()
6 | }
7 |
8 | render() {
9 | return
10 | }
11 |
12 | componentDidMount () {
13 | this.inputRef.current.focus()
14 | this.inputRef.current.value = 'daiwei'
15 | }
16 | }
17 |
18 | let RefChild = React.forwardRef ((props, ref) => (
19 |
22 | ))
23 |
24 | export {
25 | MyCreateRef,
26 | RefChild
27 | }
--------------------------------------------------------------------------------
/src/redux-study/container/FilterLink.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { setVisibilityFilter } from './../actions/action'
3 | import Link from '../components/Link'
4 |
5 | const mapStateToProps = (state, ownProps) => {
6 | return {
7 | active: ownProps.filter === state.visibilityFilter
8 | }
9 | }
10 |
11 | const mapDisToProps = (dispatch, ownProps) => {
12 | return {
13 | onClick: () => {
14 | dispatch(setVisibilityFilter(ownProps.filter))
15 | }
16 | }
17 | }
18 |
19 | const FilterLink = connect(
20 | mapStateToProps,
21 | mapDisToProps
22 | )(Link)
23 |
24 | export default FilterLink
25 |
--------------------------------------------------------------------------------
/src/redux-test/container/LinkInfo.js:
--------------------------------------------------------------------------------
1 | import {connect} from 'react-redux'
2 | import Link from './../components/Link'
3 | import {setVisibility} from './../actions'
4 |
5 | // import VisibilityFilters from './../actions'
6 |
7 | const mapStateToProps = (state, ownprops) => {
8 | return {
9 | active: state.visibilityFilter === ownprops.filter
10 | }
11 | }
12 |
13 | const mapDispatchToProps = (dispatch, ownprops) => {
14 | return {
15 | onClick: () => {
16 | return dispatch(setVisibility(ownprops.filter))
17 | }
18 | }
19 | }
20 |
21 | export default connect(
22 | mapStateToProps,
23 | mapDispatchToProps
24 | )(Link)
25 |
--------------------------------------------------------------------------------
/src/clickcount/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class ClickCount extends React.Component{
3 | constructor (props) {
4 | super(props)
5 | this.state = {
6 | count: 0
7 | }
8 | }
9 | calcCount = () => {
10 | this.setState(prev => (
11 | {
12 | count: prev.count + 1
13 | }
14 | ))
15 | }
16 | render () {
17 | return (
18 | Welcome to React
12 |
14 | To get started, edit src/App.js and save to reload.
15 |
19 | 点击的数量: {this.state.count}
20 |
21 |
22 | )
23 | }
24 | componentDidMount () {
25 | console.log(this.props)
26 | }
27 | }
28 |
29 | export default ClickCount
30 |
--------------------------------------------------------------------------------
/src/redux-study/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FilterLink from './../container/FilterLink'
3 |
4 | class Footer extends React.Component{
5 | render () {
6 | return(
7 |
8 | show:
9 | {' '}
10 |
16 | this.input = node}/>
17 |
18 |
19 | )
20 | }
21 | }
22 |
23 | AddListComp = connect()(AddListComp)
24 | export default AddListComp
--------------------------------------------------------------------------------
/src/redux-test/components/Link.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | class Link extends React.Component{
5 | render() {
6 | const { onClick, filter, active } = this.props
7 | return (
8 | {
9 | e.preventDefault()
10 | onClick()
11 | }}
12 | style={
13 | {
14 | color: active ? 'red' : '#333'
15 | }
16 | }>
17 | {filter}
18 |
19 | )
20 | }
21 | }
22 | Link.propTypes = {
23 | onClick: PropTypes.func.isRequired,
24 | filter: PropTypes.string.isRequired,
25 | active: PropTypes.bool.isRequired
26 | }
27 | export default Link
--------------------------------------------------------------------------------
/src/redux/components/TodoList.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Todo from './Todo'
4 |
5 | const TodoList = ({ todos, onTodoClick }) => (
6 | -
7 | {todos.map(todo => (
8 |
8 | {value}
9 |
10 |
11 | )
12 | }
13 | }
14 |
15 | function mapStateToProps (state) {
16 | return {
17 | value: state.count
18 | }
19 | }
20 |
21 | function mapDispatchToProps (dispatch) {
22 | return {
23 | onIncreaseClick: () => dispatch({ type: 'increase' })
24 | }
25 | }
26 |
27 | const App = connect(
28 | mapStateToProps,
29 | mapDispatchToProps
30 | )(Count)
31 |
32 | export default App
--------------------------------------------------------------------------------
/src/async-action/reduce.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | function fetchData (state = {
3 | isFetch: false,
4 | data: {},
5 | error: ''
6 | }, action) {
7 | switch (action.type) {
8 | case 'FETCH_POSTS':
9 | return Object.assign({}, state, {
10 | isFetch: true
11 | })
12 | case 'FETCH_ERROR':
13 | return Object.assign({}, state, {
14 | isFetch: false,
15 | error: action.error
16 | })
17 | case 'FETCH_SUCCESS':
18 | return Object.assign({}, state, {
19 | isFetch: false,
20 | data: action.data
21 | })
22 | default:
23 | return state
24 | }
25 | }
26 |
27 | const rootReduce = combineReducers({
28 | fetchData
29 | })
30 | export default rootReduce
--------------------------------------------------------------------------------
/src/redux/containers/AddTodo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { addTodo } from './../actions'
4 |
5 | let AddTodo = ({dispatch}) => {
6 | let input
7 | return (
8 |
9 |
26 |
27 | )
28 | }
29 |
30 | AddTodo = connect()(AddTodo)
31 |
32 | export default AddTodo
--------------------------------------------------------------------------------
/src/redux-study/actions/action.js:
--------------------------------------------------------------------------------
1 | /**
2 | * action 类型
3 | */
4 | export const ADD_TODO = 'ADD_TODO'
5 | export const TOGGLE_TODO = 'TOGGLE_TODO'
6 | export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
7 |
8 | /**
9 | * 其它的常量
10 | */
11 | export const VisibilityFilters = {
12 | SHOW_ALL: 'SHOW_ALL',
13 | SHOW_COMPLETED: 'SHOW_COMPLETED',
14 | SHOW_ACTIVE: 'SHOW_ACTIVE'
15 | }
16 |
17 | /**
18 | * action 创建函数
19 | */
20 | export function addTodo (text) {
21 | return {
22 | type: ADD_TODO,
23 | text
24 | }
25 | }
26 |
27 | export function toggleTodo (index) {
28 | return {
29 | type: TOGGLE_TODO,
30 | index
31 | }
32 | }
33 |
34 | export function setVisibilityFilter (filter) {
35 | return {
36 | type: SET_VISIBILITY_FILTER,
37 | filter
38 | }
39 | }
--------------------------------------------------------------------------------
/src/redux-test/components/ListInfoDetail.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class ListInfoDetail extends React.Component{
4 | render () {
5 | const {onClick, todos} = this.props
6 | return (
7 |
8 | {
9 | todos.map(todo => {
10 | return (
11 | {
17 | e.preventDefault()
18 | onClick(todo)
19 | }}>
20 | {todo.text}
21 |
22 | )
23 | })
24 | }
25 |
26 | )
27 | }
28 | }
29 | export default ListInfoDetail
--------------------------------------------------------------------------------
/src/redux/reducers/todos.js:
--------------------------------------------------------------------------------
1 | import undoable, { distinctState } from 'redux-undo'
2 | const todos = (state = [], action) => {
3 | switch (action.type) {
4 | case 'ADD_TODO':
5 | return [
6 | ...state,
7 | {
8 | id: action.id,
9 | text: action.text,
10 | completed: false
11 | }
12 | ]
13 | case 'TOGGLE_TODO':
14 | return state.map(todo => {
15 | if (todo.id === action.id) {
16 | return {
17 | ...todo,
18 | completed: !todo.completed
19 | }
20 | } else {
21 | return todo
22 | }
23 | })
24 | default:
25 | return state
26 | }
27 | }
28 |
29 | const undoableTodos = undoable(todos, {
30 | filter: distinctState()
31 | })
32 |
33 | export default undoableTodos
--------------------------------------------------------------------------------
/src/async-action/sagas.js:
--------------------------------------------------------------------------------
1 | import { call, takeEvery, all, put} from 'redux-saga/effects'
2 | import axios from 'axios'
3 | import {fetchBingInfo} from './action'
4 |
5 | function* requestData (actions) {
6 | yield put(fetchBingInfo(actions.url))
7 | try{
8 | const res = yield call((url) => new Promise((resolve, reject) => {
9 | axios.get(url).then(res => {
10 | resolve(res)
11 | }).catch(err => {
12 | reject(err)
13 | })
14 | }), actions.url)
15 | yield put({type: 'FETCH_SUCCESS', data: res.data})
16 | } catch (e) {
17 | yield put({type: 'FETCH_ERROR', error: e})
18 | }
19 | }
20 |
21 | function* watchRequestData () {
22 | yield takeEvery('FETCH_REQUEST', requestData)
23 | }
24 |
25 | export default function* rootSaga () {
26 | yield all([
27 | watchRequestData()
28 | ])
29 | }
--------------------------------------------------------------------------------
/src/redux-study/container/AddTodo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { addTodo } from './../actions/action'
4 |
5 | class AddTodo extends React.Component{
6 | render () {
7 | var input
8 | let { dispatch } = this.props
9 | return (
10 |
11 |
24 |
25 | )
26 | }
27 | }
28 |
29 | AddTodo = connect()(AddTodo)
30 | export default AddTodo
31 |
--------------------------------------------------------------------------------
/src/redux-study/components/TodoList.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Todo from './Todo'
4 |
5 | class TodoList extends React.Component{
6 | render () {
7 | const {todos, onTodoClick} = this.props
8 | return (
9 | -
10 | {
11 | todos.map((todo, index) => {
12 | return
11111
13 | } 14 | return ( 15 |
16 |
23 | )
24 | }
25 | }
26 | Image.propTypes = {
27 | value: PropTypes.object,
28 | getImageData: PropTypes.func.isRequired
29 | }
30 | export default Image
31 |
--------------------------------------------------------------------------------
/src/async-action/index.js:
--------------------------------------------------------------------------------
1 | import Image from './Image'
2 | import React from 'react'
3 | import {render} from 'react-dom'
4 | import { createStore, applyMiddleware } from 'redux'
5 | import reducer from './reduce'
6 | import rootSaga from './sagas'
7 | import createSagaMiddleware from 'redux-saga'
8 |
9 | const sagaMiddleware = createSagaMiddleware()
10 | const store = createStore(
11 | reducer,
12 | applyMiddleware(sagaMiddleware)
13 | )
14 | sagaMiddleware.run(rootSaga)
15 |
16 | function renderDom () {
17 | render(
18 | {isFetch ? '数据加载中...' : '数据加载完成!'}
17 | 18 | { 19 | img 20 | } 21 |所有数据: {JSON.stringify(value)}
22 |
22 |
25 |
26 |
30 |
31 |
32 | )
33 | }
34 | }
35 |
36 | export default TestDom
--------------------------------------------------------------------------------
/src/redux/selector.js:
--------------------------------------------------------------------------------
1 | import { createSelector } from 'reselect'
2 | const getVisibilityFilter = state => state.visibilityFilter
3 | const getTodos = state => state.todos
4 |
5 | export const getVisibleTodos = createSelector(
6 | [getVisibilityFilter, getTodos],
7 | (visibilityFilter, todos) => {
8 | switch (visibilityFilter) {
9 | case 'SHOW_ALL':
10 | return todos
11 | case 'SHOW_COMPLETED':
12 | return todos.filter(t => t.complete)
13 | case 'SHOW_ACTIVE':
14 | return todos.filter(t => !t.complete)
15 | default:
16 | return todos
17 | }
18 | }
19 | )
20 |
21 | const getKeyword = state => state.keyword
22 | export const getVisibleTodosFilteredByKeyword = createSelector(
23 | [getVisibleTodos, getKeyword],
24 | (visibilitytodos, keyword) => visibilitytodos.filter(
25 | todo => todo.text.indexOf(keyword) > -1
26 | )
27 | )
--------------------------------------------------------------------------------
/src/purecomp/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | // import Im from 'immutable'
3 | class CounterButton extends React.Component{
4 | constructor(props) {
5 | super(props)
6 | this.state = {
7 | count: 1
8 | }
9 | }
10 |
11 | clickHandler = () => {
12 | this.setState((prevState, props) => ({
13 | count: prevState.count + 1
14 | }))
15 | }
16 |
17 | shouldComponentUpdate(nextProps, nextState) {
18 | if (this.props.color !== nextProps.color) return true
19 | if (this.state.count !== nextState.count) return true
20 | return false
21 | }
22 |
23 | render() {
24 | return(
25 |
26 | CounterButton: {this.state.count}
27 |
28 |
29 | )
30 | }
31 | }
32 |
33 | export {
34 | CounterButton
35 | }
--------------------------------------------------------------------------------
/src/redux-test/container/ListInfo.js:
--------------------------------------------------------------------------------
1 | // 用于显示中间的数据列表内容
2 | import {connect} from 'react-redux'
3 | import {toggleTodo} from './../actions'
4 | import ListInfoDetail from './../components/ListInfoDetail'
5 |
6 | const getVisibilityTodos = (todos, filter) => {
7 | switch (filter) {
8 | case 'SHOW_COMPLETED':
9 | return todos.filter(t => t.completed)
10 | case 'SHOW_ACTIVE':
11 | return todos.filter(t => !t.completed)
12 | case 'SHOW_ALL':
13 | default:
14 | return todos
15 | }
16 | }
17 |
18 | const mapStateToProps = (state) => {
19 | return {
20 | todos: getVisibilityTodos(state.todos, state.visibilityFilter)
21 | }
22 | }
23 |
24 | const mapDispatchToProps = (dispatch) => {
25 | return {
26 | onClick: (todos) => {
27 | return dispatch(toggleTodo(todos.id))
28 | }
29 | }
30 | }
31 |
32 | export default connect(
33 | mapStateToProps,
34 | mapDispatchToProps
35 | )(ListInfoDetail)
--------------------------------------------------------------------------------
/src/todolist/todo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | // import { render } from 'react-dom'
3 | import Search from './search'
4 | import List from './list'
5 | import PropTypes from 'prop-types'
6 | class Todo extends React.Component{
7 | static contextTypes = {
8 | age: PropTypes.string.isRequired,
9 | name: PropTypes.string.isRequired
10 | }
11 | constructor(props){
12 | super(props)
13 | this.state = {
14 | listInfo: []
15 | }
16 | }
17 | setData = (data) => {
18 | alert(this.context.name)
19 | let arr = this.state.listInfo
20 | arr.push(data)
21 | this.setState ({
22 | listInfo: arr
23 | })
24 | }
25 | render () {
26 | return (
27 |
28 |
31 |
33 | )
34 | }
35 | }
36 |
37 | export default Todo
--------------------------------------------------------------------------------
/src/context/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | const ThemeContext = React.createContext('ligth')
3 |
4 | class Button extends React.Component{
5 | render() {
6 | return(
7 |
8 | )
9 | }
10 | }
11 |
12 | class ThemeButton extends React.Component{
13 | render() {
14 | return(
15 | {this.context.name}
29 |{this.context.age}
30 |-
32 |
26 |
28 | )
29 | }
30 | }
31 |
32 | class TestContext extends React.Component{
33 | render() {
34 | return (
35 |
31 |
40 | )
41 | }
42 | }
43 | export default MyRedirect
--------------------------------------------------------------------------------
/src/redux/containers/UnDo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ActionCreators as UndoActionCreators } from 'redux-undo'
3 | import { connect } from 'react-redux'
4 |
5 | class UnDo extends React.Component{
6 | render () {
7 | const { canUndo, canRedo, onUndo, onRedo } = this.props
8 | return (
9 | 34 | 预计将在{this.state.time}s之后跳转 35 |
36 | 39 |10 | 13 | 16 |
17 | ) 18 | } 19 | } 20 | 21 | const mapStateToProps = (state) => { 22 | return { 23 | canUndo: state.todos.past.length > 0, 24 | canRedo: state.todos.future.length > 0 25 | } 26 | } 27 | 28 | const mapDispatchToProps = (dispatch) => { 29 | return { 30 | onUndo: () => dispatch(UndoActionCreators.undo()), 31 | onRedo: () => dispatch(UndoActionCreators.redo()) 32 | } 33 | } 34 | 35 | const UnDoC = connect( 36 | mapStateToProps, 37 | mapDispatchToProps 38 | )(UnDo) 39 | 40 | export default UnDoC 41 | -------------------------------------------------------------------------------- /src/noctrl/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | class NameForm extends React.Component{ 3 | constructor(props) { 4 | super(props) 5 | } 6 | handleClick = (e) => { 7 | e.preventDefault() 8 | alert(this.input.value) 9 | } 10 | render() { 11 | return ( 12 |
13 | this.input = node}/>
14 |
15 |
16 | )
17 | }
18 | }
19 |
20 | class FileInput extends React.Component{
21 | constructor(props) {
22 | super(props)
23 | this.state = {
24 | filetext: ''
25 | }
26 | }
27 | subFile = (e) => {
28 | e.preventDefault()
29 | this.setState({
30 | filetext: this.input.files[0].name
31 | })
32 | }
33 | render() {
34 | return(
35 |
36 | this.input = file}/>
37 |
38 |
40 | )
41 | }
42 | }
43 |
44 | export {
45 | NameForm,
46 | FileInput
47 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": ".",
6 | "dependencies": {
7 | "axios": "^0.18.0",
8 | "cross-fetch": "^2.2.3",
9 | "immutable": "^3.8.2",
10 | "react": "^16.4.1",
11 | "react-addons-css-transition-group": "^15.6.2",
12 | "react-dom": "^16.4.1",
13 | "react-redux": "^5.0.7",
14 | "react-router": "^4.3.1",
15 | "react-router-dom": "^4.3.1",
16 | "react-scripts": "1.1.4",
17 | "redux": "^4.0.0",
18 | "redux-logger": "^3.0.6",
19 | "redux-saga": "^0.16.2",
20 | "redux-thunk": "^2.3.0",
21 | "redux-undo": "^0.6.1",
22 | "reselect": "^4.0.0",
23 | "url-parse": "^1.4.3"
24 | },
25 | "scripts": {
26 | "start": "react-scripts start",
27 | "build": "react-scripts build",
28 | "test": "react-scripts test --env=jsdom",
29 | "eject": "react-scripts eject"
30 | },
31 | "devDependencies": {
32 | "babel-plugin-transform-class-properties": "^6.24.1",
33 | "babel-plugin-transform-decorators-legacy": "^1.3.5",
34 | "babel-preset-env": "^1.7.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/renderprop/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class MouseReacker extends React.Component{
3 | constructor(props){
4 | super(props)
5 | this.state = {
6 | x: 0,
7 | y: 0
8 | }
9 | }
10 |
11 | move = (e) => {
12 | this.setState({
13 | x: e.pageX - e.target.offsetLeft,
14 | y: e.pageY - e.target.offsetTop
15 | })
16 | }
17 |
18 | render () {
19 | return (
20 | fileText: {this.state.filetext}
39 |
27 |
40 | )
41 | }
42 | }
43 |
44 | export default MouseReacker
--------------------------------------------------------------------------------
/src/refs/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react'
2 | class CustomTextInput extends React.Component{
3 | constructor(props) {
4 | super(props)
5 | this.textInput = React.createRef()
6 | }
7 | focusTextInput = () => {
8 | this.textInput.current.focus()
9 | }
10 | render() {
11 | return(
12 | just move mouse
28 | 38 |The current mouse position is ({this.state.x}, {this.state.y})
39 |
13 |
15 |
18 |
19 | )
20 | }
21 | }
22 |
23 | class Refs extends React.Component{
24 | constructor(props){
25 | super(props)
26 | this.myRef = React.createRef()
27 | this.refInput = React.createRef()
28 | }
29 | render(){
30 | return (
31 |
32 |
34 |
35 | )
36 | }
37 | componentDidMount(){
38 | this.refInput.current.focusTextInput()
39 | console.log(this.myRef.current)
40 | console.log(this.refInput.current.focusTextInput())
41 | }
42 | }
43 | export {Refs}
--------------------------------------------------------------------------------
/src/redux-study/reduces/reduces.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import {
3 | ADD_TODO,
4 | // TOGO_TODO,
5 | SET_VISIBILITY_FILTER,
6 | VisibilityFilters,
7 | TOGGLE_TODO
8 | } from './../actions/action'
9 |
10 | const { SHOW_ALL } = VisibilityFilters
11 |
12 | function visibilityFilter (state = SHOW_ALL, action) {
13 | switch (action.type) {
14 | case SET_VISIBILITY_FILTER:
15 | return action.filter
16 | default:
17 | return state
18 | }
19 | }
20 |
21 | function todos (state = [], action) {
22 | switch (action.type) {
23 | case ADD_TODO:
24 | return [
25 | ...state,
26 | {
27 | text: action.text,
28 | completed: false
29 | }
30 | ]
31 | case TOGGLE_TODO:
32 | return state.map((todo, index) => {
33 | if (index === action.index) {
34 | return Object.assign({}, todo, {
35 | completed: !todo.completed
36 | })
37 | }
38 | return todo
39 | })
40 | default:
41 | return state
42 | }
43 | }
44 |
45 | const todoApp = combineReducers({
46 | visibilityFilter,
47 | todos
48 | })
49 |
50 | export default todoApp
51 |
--------------------------------------------------------------------------------
/src/gaojie/ele.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | // function setHeader (title) {
3 | // return function (HeaderComponents) {
4 | // return class HOC extends React.Component{
5 | // componentWillMount () {
6 | // // alert(1)
7 | // }
8 | // render() {
9 | // return (
10 | // 你好，React
33 |
11 | //
18 | // )
19 | // }
20 | // }
21 | // }
22 | // }
23 | // export default setHeader
24 | export default (title) => (HeaderComponents) => class HOC extends React.Component{
25 | componentDidMount() {
26 | // 可以方便地得到state，做一些更深入的修改。
27 | console.log('setHeaderInfo', this.state);
28 | }
29 | render() {
30 | const newProps = {
31 | test:' --> | 这是高阶组件 --> 属性代理'
32 | }
33 | return (
34 |
12 | // {
13 | // title ? title : '这是默认的头部文字'
14 | // }
15 | //
16 | //
35 |
42 | )
43 | }
44 | }
--------------------------------------------------------------------------------
/src/render/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import TestRender from './testrender'
3 | class RenderForm extends React.Component{
4 | constructor(props){
5 | super(props)
6 | this.inputName
7 | this.age
8 | this.state = {
9 | listData: []
10 | }
11 | }
12 | onSubmit = (e) => {
13 | e.preventDefault()
14 | if (this.inputName.value && this.age.value) {
15 | let obj = {
16 | name: this.inputName.value,
17 | age: this.age.value
18 | }
19 | this.setState((prevState) => (
20 | {
21 | listData: [...prevState.listData, obj]
22 | }
23 | ))
24 | console.log(this.state.listData)
25 | }
26 | }
27 | render() {
28 | return(
29 |
41 | )
42 | }
43 | }
44 | export default RenderForm
--------------------------------------------------------------------------------
/src/transition/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
3 | import './transition.css'
4 | class TodoList extends React.Component{
5 | constructor (props) {
6 | super(props)
7 | this.state = {
8 | items: ['hello', 'world', 'click', 'me']
9 | }
10 | }
11 | handleAdd = () => {
12 | const newItems = this.state.items.concat([
13 | prompt('Enter some text')
14 | ])
15 | this.setState({
16 | items: newItems
17 | })
18 | }
19 | handleRemove = (i) => {
20 | let newItems = this.state.items.slice()
21 | newItems.splice(i, 1)
22 | this.setState({
23 | items: newItems
24 | })
25 | }
26 |
27 | render () {
28 | const item = this.state.items.map((item, i) => (
29 |
36 | {
37 | title ? title : '这是默认的名字'
38 | }
39 |
41 |
30 | {item}
31 |
32 | ))
33 | return (
34 |
35 |
38 |
44 | {item}
45 |
46 |
47 | )
48 | }
49 | }
50 | export default TodoList
--------------------------------------------------------------------------------
/src/renderprop/comp.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class Cat extends React.Component{
3 | render() {
4 | const {mouse} = this.props
5 | return (
6 |
17 | )
18 | }
19 | }
20 |
21 | class Mouse extends React.Component{
22 | constructor(props) {
23 | super(props)
24 | this.state = {
25 | x: 0,
26 | y: 0
27 | }
28 | }
29 | move = (e) => {
30 | this.setState({
31 | x: e.pageX - e.target.offsetLeft,
32 | y: e.pageY - e.target.offsetTop,
33 | })
34 | }
35 | render() {
36 | return (
37 |
43 | {this.props.render(this.state)}
44 |
45 | )
46 | }
47 | }
48 |
49 | export default class TestRenderProp extends React.Component{
50 | render() {
51 | return(
52 |
53 | (
54 |
55 | )}>
56 |
57 |
58 | )
59 | }
60 | }
--------------------------------------------------------------------------------
/src/portals/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | // const appRoot = document.getElementById('app-root')
4 | const modalRoot = document.getElementById('modal-root')
5 |
6 | class Modal extends React.Component{
7 | constructor (props) {
8 | super(props)
9 | this.el = document.createElement('div')
10 | }
11 |
12 | componentDidMount () {
13 | modalRoot.appendChild(this.el)
14 | }
15 |
16 | componentWillUnmount () {
17 | modalRoot.removeChild(this.el)
18 | }
19 |
20 | render () {
21 | return ReactDOM.createPortal(
22 | this.props.children,
23 | this.el
24 | )
25 | }
26 | }
27 |
28 | class Parent extends React.Component{
29 | constructor(props) {
30 | super(props)
31 | this.state = {
32 | count: 0
33 | }
34 | }
35 |
36 | handleClick = () => {
37 | this.setState((prevState) => ({
38 | count: prevState.count + 1
39 | }))
40 | }
41 |
42 | render () {
43 | return (
44 |
47 |
55 |
59 |
60 | )
61 | }
62 | }
63 |
64 | export default Parent
--------------------------------------------------------------------------------
/src/redux/containers/VisibleTodoList.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 | import { toggleTodo } from '../actions'
3 | import TodoList from '../components/TodoList'
4 | import {createSelector} from 'reselect'
5 | const getVisibleTodos = (todos, filter) => {
6 | switch (filter) {
7 | case 'SHOW_COMPLETED':
8 | return todos.filter(t => t.completed)
9 | case 'SHOW_ACTIVE':
10 | return todos.filter(t => !t.completed)
11 | case 'SHOW_ALL':
12 | default:
13 | return todos
14 | }
15 | }
16 |
17 | // const getTodos = state => state.todos
18 | // const getVisibilityFilter = state => state.visibilityFilter
19 | // const getKeyword = (state) => state.keyword
20 | // const getVisibleTodos = createSelector(
21 | // getTodos,
22 | // getVisibilityFilter,
23 | // getKeyword,
24 | // (todos, visibilityFilter, keywords) => {
25 | // switch (visibilityFilter) {
26 | // case 'SHOW_COMPLETED':
27 | // return todos.filter(t => t.completed)
28 | // case 'SHOW_ACTIVE':
29 | // return todos.filter(t => !t.completed)
30 | // case 'SHOW_ALL':
31 | // default:
32 | // return todos
33 | // }
34 | // }
35 | // )
36 |
37 | const mapStateToProps = state => {
38 | return {
39 | todos: getVisibleTodos(state.todos.present, state.visibilityFilter)
40 | }
41 | }
42 |
43 | const mapDispatchToProps = dispatch => {
44 | return {
45 | onTodoClick: id => {
46 | dispatch(toggleTodo(id))
47 | }
48 | }
49 | }
50 |
51 | const VisibleTodoList = connect(
52 | mapStateToProps,
53 | mapDispatchToProps
54 | )(TodoList)
55 |
56 | export default VisibleTodoList
57 |
--------------------------------------------------------------------------------
/src/extends/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class FancyBorder extends React.Component{
3 | render() {
4 | return(
5 | Number of Clicks: {this.state.count}
48 |49 | Open up the browser DevTools 50 | to observe that the button 51 | is not a child of the div 52 | with the onClick handler. 53 |
54 |
56 |
57 |
58 |
7 | {this.props.children}
8 |
9 | )
10 | }
11 | }
12 |
13 | class WelcomeDialog extends React.Component{
14 | render () {
15 | return (
16 | 这是title
18 |这是一个组件的内容信息哈哈哈哈哈哈哈
19 |{this.props.title}
29 |{this.props.message}
30 | {this.props.children} 31 |
36 |
40 | )
41 | }
42 | 这是用于测试context自上到下切换样式的Demo
39 |
24 |
39 | )
40 | }
41 |
34 |
37 |
38 | 这是我显示内容得颜色呀呀呀呀呀
36 |
66 |
68 |
13 | 我是一个普通的组件
14 |
15 | )
16 | }
17 | }
18 |
19 | class MTG extends React.Component{
20 | constructor(props) {
21 | super(props)
22 | this.state = {
23 | name: '戴维'
24 | }
25 | }
26 | render() {
27 | return(
28 |
29 | 这是组件的内容信息{this.props.test}
30 |
31 | )
32 | }
33 | }
34 |
35 | class ETG extends React.Component{
36 | constructor(props) {
37 | super(props)
38 | this.state = {
39 | count: 1
40 | }
41 | }
42 | componentDidMount() {
43 | console.log('this.props.refs', this.props)
44 | }
45 | render() {
46 | const { getRef, ...props} = this.props
47 | console.log('props', ...props)
48 | console.log('this.props', this.props)
49 | return (
50 |
51 | hello ETG
52 |
53 | )
54 | }
55 | }
56 |
57 | class FButton extends React.Component{
58 | constructor(props) {
59 | super(props)
60 | this.state = {
61 | name: "daiwei",
62 | age: 25
63 | }
64 | }
65 | changeAge = () => {
66 | this.setState({
67 | age: Math.floor(Math.random() * 80)
68 | })
69 | }
70 | render() {
71 | return(
72 |
73 |
74 |
75 | )
76 | }
77 | }
78 |
79 | // export default TestGaoJie
80 | const TestGaoJie = WithHeader (TG)
81 | const TestMineGaoJie = setHeader ('hello world')(MTG)
82 | // const ExtendsComGaoJie = ExtendsCom ('daiwei')(ETG)
83 | const TestRefsCompGaoJie = RefsComp (ETG)
84 |
85 | const TestFButton = LogProps (FButton)
86 | export {
87 | TestGaoJie,
88 | TestMineGaoJie,
89 | // ExtendsComGaoJie,
90 | TestRefsCompGaoJie,
91 | TestFButton
92 | }
--------------------------------------------------------------------------------
/src/liferecycle/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import TestJsx from './test'
3 | class TestLifereCycle extends React.Component{
4 | constructor(props) {
5 | super(props)
6 | this.name = '戴维'
7 | this.state = {
8 | age: 24
9 | }
10 | }
11 |
12 | clickHandler = () => {
13 | this.setState((prevState) => ({
14 | age: prevState.age - 1
15 | }))
16 | }
17 | // getDerivedStateFromProps (nextProps, prevState) {
18 | // console.log('getDerivedStateFromProps: ', `nextProps: ${nextProps}`, `prevState: ${prevState}`)
19 | // }
20 | componentDidMount () {
21 | console.log('componentDidMount: 在该方法里设置状态将会触发重渲。')
22 | }
23 | componentWillMount() {
24 | console.log('componentWillMount')
25 | console.log(this.props)
26 | }
27 | shouldComponentUpdate (nextProps, nextState) {
28 | console.log('shouldComponentUpdate', `nextProps: ${nextProps}`, `prevState: ${nextState}`)
29 | return !(nextState === this.state)
30 | }
31 | // getSnapshotBeforeUpdate (prevProps, prevState) {
32 | // console.log('getSnapshotBeforeUpdate:在最新的渲染输出提交给DOM前将会立即调用', `prevProps: ${prevProps}`, `prevState: ${prevState}`)
33 | // }
34 | componentDidUpdate (prevProps, prevState) {
35 | console.log('componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用', `prevProps: ${prevProps}`, `prevState: ${prevState}`)
36 | }
37 |
38 | componentWillUnmount () {
39 | console.log('componentWillUnmount: 在组件被卸载和销毁之前立刻调用')
40 | }
41 |
42 | componentDidCatch(error, info) {
43 | console.log('componentDidCatch', `error: ${error}`, `info: ${info}`)
44 | }
45 |
46 | render(){
47 | let tpl = (
48 |
54 |
63 | )
64 | }
65 | }
66 |
67 | TestLifereCycle.defaultProps = {
68 | color: 'red'
69 | }
70 |
71 | export default TestLifereCycle
--------------------------------------------------------------------------------
/src/stateup/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | class BoilingVerdict extends React.Component{
3 | render () {
4 | const { cel } = this.props
5 | if (cel >= 100) return 55 | 我的名字叫{this.name} 56 |
57 |58 | 我{this.state.age}岁了 59 |
60 | {tpl} 61 | 62 |水开了
6 | return水并没有开
7 | } 8 | } 9 | 10 | const toCel = (fah) => { 11 | return (fah - 32) * 5 / 9 12 | } 13 | 14 | const toFah = (cel) => { 15 | return (cel * 9 / 5) + 32 16 | } 17 | 18 | const tryConvert = (temperature, convert) => { 19 | const input = parseFloat(temperature) 20 | if (Number.isNaN(input)) { 21 | return '' 22 | } 23 | const output = convert(input) 24 | const rounded = Math.round(output * 1000) / 1000 25 | return rounded.toString() 26 | } 27 | 28 | const scaleNames = { 29 | c: '摄氏度', 30 | f: '华氏度' 31 | } 32 | 33 | class TemperatureInput extends React.Component{ 34 | constructor(props) { 35 | super(props) 36 | this.state = { 37 | temperature: '' 38 | } 39 | } 40 | handleChange = (e) => { 41 | this.props.onTemperatureChange(e.target.value) 42 | } 43 | render(){ 44 | const temperature = this.props.temperature 45 | const scale = this.props.scale 46 | return ( 47 |
48 |
49 |
50 |
51 | )
52 | }
53 | }
54 |
55 | class CalcBoiling extends React.Component{
56 | constructor(props) {
57 | super(props)
58 | this.state = {
59 | temperature: '',
60 | scale: 'c'
61 | }
62 | }
63 | handleCelChange = (temperature) => {
64 | this.setState({
65 | scale: 'c',
66 | temperature
67 | })
68 | }
69 | handleFahChange = (temperature) => {
70 | this.setState({
71 | scale: 'f',
72 | temperature
73 | })
74 | }
75 | render() {
76 | const {scale, temperature} = this.state
77 | const cel = scale === 'f' ? tryConvert(temperature, toCel) : temperature
78 | const fah = scale === 'c' ? tryConvert(temperature, toFah) : temperature
79 | return(
80 |
81 |
82 |
83 |
84 | )
85 | }
86 | }
87 | export default CalcBoiling
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ'
45 | );
46 | });
47 | } else {
48 | // Is not local host. Just register service worker
49 | registerValidSW(swUrl);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then(registration => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | installingWorker.onstatechange = () => {
62 | if (installingWorker.state === 'installed') {
63 | if (navigator.serviceWorker.controller) {
64 | // At this point, the old content will have been purged and
65 | // the fresh content will have been added to the cache.
66 | // It's the perfect time to display a "New content is
67 | // available; please refresh." message in your web app.
68 | console.log('New content is available; please refresh.');
69 | } else {
70 | // At this point, everything has been precached.
71 | // It's the perfect time to display a
72 | // "Content is cached for offline use." message.
73 | console.log('Content is cached for offline use.');
74 | }
75 | }
76 | };
77 | };
78 | })
79 | .catch(error => {
80 | console.error('Error during service worker registration:', error);
81 | });
82 | }
83 |
84 | function checkValidServiceWorker(swUrl) {
85 | // Check if the service worker can be found. If it can't reload the page.
86 | fetch(swUrl)
87 | .then(response => {
88 | // Ensure service worker exists, and that we really are getting a JS file.
89 | if (
90 | response.status === 404 ||
91 | response.headers.get('content-type').indexOf('javascript') === -1
92 | ) {
93 | // No service worker found. Probably a different app. Reload the page.
94 | navigator.serviceWorker.ready.then(registration => {
95 | registration.unregister().then(() => {
96 | window.location.reload();
97 | });
98 | });
99 | } else {
100 | // Service worker found. Proceed as normal.
101 | registerValidSW(swUrl);
102 | }
103 | })
104 | .catch(() => {
105 | console.log(
106 | 'No internet connection found. App is running in offline mode.'
107 | );
108 | });
109 | }
110 |
111 | export function unregister() {
112 | if ('serviceWorker' in navigator) {
113 | navigator.serviceWorker.ready.then(registration => {
114 | registration.unregister();
115 | });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {HashRouter as Router, Route, NavLink, Link} from 'react-router-dom'
3 | import Todo from './../todolist/todo'
4 | import ClickCount from './../clickcount/index'
5 | import MyRedirect from './../redirect/index'
6 | import PropTypes from 'prop-types'
7 | import TestLifereCycle from './../liferecycle'
8 | import {MyCreateRef, RefChild} from './../liferecycle/createRef'
9 | import { findDOMNode } from 'react-dom'
10 | import TestDom from './../liferecycle/dom'
11 | import RenderForm from './../render'
12 | import CalcBoiling from './../stateup'
13 | import {signUpDialog, WelcomeDialog} from './../extends'
14 | import {Refs} from './../refs'
15 | import {NameForm, FileInput} from './../noctrl'
16 | import {CounterButton} from './../purecomp'
17 | import {TestContext} from './../context'
18 | import ContextTheme from './../context/test'
19 | import NewContext from './../context/test1'
20 | import Rorttals from './../portals'
21 | import ErrorBoundary from './../boundaries'
22 | import {TestGaoJie,TestMineGaoJie, ExtendsComGaoJie, TestRefsCompGaoJie, TestFButton} from './../gaojie'
23 | import MouseReacker from './../renderprop'
24 | import TestRenderProp from './../renderprop/comp'
25 | import Trans from './../transition'
26 | import TransSider from './../transition/sider'
27 | class MyRoute extends React.Component{
28 | constructor (props) {
29 | super(props)
30 | this.myRef = React.createRef()
31 | }
32 | /**
33 | * 基本使用方法，声明contextTypes，在函数或者render中通过this.context调用
34 | */
35 | static childContextTypes = {
36 | name: PropTypes.string.isRequired,
37 | age: PropTypes.string.isRequired
38 | }
39 | componentDidMount () {
40 | console.log('MyRoute mounted: ')
41 | console.log(this.myRef.current)
42 | console.log('findDOMNode(this.myRef.current)', findDOMNode(this.myRef.current))
43 | }
44 | /**
45 | * getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定，不然会产生错误。
46 | */
47 | getChildContext = () => {
48 | return {
49 | name: "daiwei hahaha",
50 | age: "19"
51 | }
52 | }
53 | getConfirmation = (message, callback) => {
54 | const allowTransition = window.confirm(message)
55 | callback(allowTransition)
56 | }
57 | render () {
58 | return(
59 |
60 |
61 |
197 |
198 | )
199 | }
200 | }
201 |
202 | export default MyRoute
--------------------------------------------------------------------------------
62 |
196 | -
63 |
-
64 |
todo 65 |
66 | -
67 |
首页 68 |
69 | - 70 | redirect 71 | 72 |
- 73 | click 80 | 81 |
- 82 | life 83 | 84 |
- 85 | createRef 86 | 87 |
- 88 | dom 89 | 90 |
- 91 | render 92 | 93 |
- 94 | stateup 95 | 96 |
- 97 | extends 98 | 99 |
- 100 | extends1 101 | 102 |
- 103 | ref 104 | 105 |
- 106 | 非控制组件 107 | 108 |
- 109 | purecomp 110 | 111 |
- 112 | context 113 | 114 |
- 115 | context1 116 | 117 |
- 118 | Rorttals 119 | 120 |
- 121 | 高阶组件 122 | 123 |
- 124 | renderprop 125 | 126 |
- 127 | TestRenderProp 128 | 129 |
- 130 | trans 131 | 132 |
- 133 | transSider 134 | 135 |
137 | */}
142 | (
143 |
154 |
155 |
156 |
157 | {
158 | return(
159 | (
166 | (
169 | (
175 |
176 | )}/>
178 |
179 | (
180 |
189 |
190 |
191 | (
192 |
195 |
144 |
146 | 点击我
147 |
148 |
149 | )}/>
150 |
151 |
160 |
163 | )
164 | }}/>
165 |
170 |
173 | )} />
174 |
181 |
187 | )}/>
188 |