Question

我有一个组件，我希望能够覆盖该组件中的render方法和某些方法。在React中，您不能使用继承。在函数式编程中可能有一种使用组合的方法，但是你如何将渲染和所有方法组合成单独的组件。对于React默认组件函数（例如componentDidUpdate），您是否可以将其组合为一个单独的组件，并将其引入更高阶的组件（HoC）。如何在HoC的每个组成组件中传递或访问道具和状态。找到一个扩展组件并以某种方式覆盖方法的例子会很棒。

Answer 1

“使用功能程序模拟继承 - ”停止，什么？你为什么要为自己选择这样的负担？

功能编程不是要翻译你在其他范例中所知道的概念。在开始编写有意义的程序之前，你需要学习很多新东西。

这里有来自Brian Lonsdorf's React Rally 2016 presentation的一些东西 - 它可能会告诉你彩虹末端的底池是什么样的，但是到达那里就是它自己的东西。

让功能风格焕然一新;把旧习惯留在门口。

const { withReducer } = Recompose

const Reducer = g =>
({
  fold: g,
  contramap: f =>
    Reducer((state, action) => g(state, f(action))),
  map: f =>
    Reducer((state, action) => f(g(state, action))),
  concat: o =>
    Reducer((state, action) => o.fold(g(state, action), action))
})

const appReducer = Reducer((state, action) => {
  switch (action.type) {
    case 'set_visibility_filter':
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
})

const todoReducer = Reducer((state, action) => {
  switch (action.type) {
    case 'new_todo':
      const t = { id: 0, title: action.payload.title }
      return Object.assign({}, state, {
        todos: state.todos.concat(t)
      })
    default:
      return state
  }
})

const Component = g =>
({
  fold: g,
  contramap: f =>
    Component(x => g(f(x))),
  concat: other =>
    Component(x => <div>{g(x)} {other.fold(x)}</div>)
})


const classToFn = C =>
	(props) => <C {...props} />
  
const Hoc = g =>
({
  fold: g,
  concat: other =>
    Hoc(x => g(other.fold(x)))
})

// Example
// ======================

const todoApp = appReducer.concat(todoReducer)
                .contramap(action => Object.assign({filter: 'all'}, action))
                .map(s => Object.assign({}, s, {lastUpdated: Date()}))

const hoc = Hoc(withReducer('state', 'dispatch', todoApp.fold, {todos: []}))

const Todos = hoc.fold(({ state, dispatch }) =>
  <div>
    <span>Filter: {state.visibilityFilter}</span>
    <ul>
      { state.todos.map((t, i) => <li key={i}>{t.title}</li>) }
    </ul>
    <button onClick={() =>
      dispatch({ type: 'new_todo', payload: {title: 'New todo'}})}>
      Add Todo
    </button>
    <button onClick={() =>
      dispatch({ type: 'set_visibility_filter' })}>
      Set Visibility
    </button>
  </div>
)

const TodoComp = Component(classToFn(Todos))

const Header = Component(s => <h1>Now Viewing {s}</h1>)

const ProfileLink = Component(u => <a href={`/users/${u.id}`}>{u.name}</a>)


const App = Header.contramap(s => s.pageName)
						.concat(TodoComp)
						.concat(ProfileLink.contramap(s => s.current_user))
            .fold({ pageName: 'Home',
                    current_user: {id: 2, name: 'Boris' } })

ReactDOM.render(
  App,
  document.getElementById('container')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recompose/0.26.0/Recompose.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

使用React Redux应用程序中的函数编程模拟继承

1 个答案: