반응왜 이렇게 복잡해...?
28051 단어 reactreduxjavascript
내가 지금 말할게.
그것은 읽을 수 없고 너무 복잡해서 필요를 초과했다.
어, 너는 다른 생각이 있니?
React에서 유행하는 Redux부터 시작해서 가장 기본적인 예를 들자.
export const setVisibilityFilter = filter => ({
type: 'SET_VISIBILITY_FILTER',
filter
})
//...
const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
이것은 예측 가능한 상태 용기에 관한 것이라고 말할 수 있다.Thunk를 넣고 혼합상태치를 시작하면 예측성이 사라집니다.
그 밖에 이런 감속기는 매우 간단하지만, 실제 응용에서, 그것들은 지금까지 이렇게 간단하지 않았다.그것들은 커지기 때문에 함수로 분해하기 시작한다. 이 함수들은 같은 파일에 잘 넣지 못하기 때문에 더 많은 파일을 만들었다.이제 데이터의 상태를 관리하기 위해 모든 파일을 왔다 갔다 합니다.
리액스 버전의 레드ux로 넘어갑시다. 오, 아가, 시작합시다.
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
봐봐
useReducer.이것은 구성 요소의 상태를 바꾸는 모든 기술을 제공했다.만약 우리가 사용해야 한다면, 예를 들면, 두 개 혹은 세 개의 다른 상태에서 코드가 어떤 변화를 일으킬지.지금 너는 이미 심각한 추악함을 소개했어...const [state1, dispatch1] = useReducer(reducer1, initialState1);
const [state2, dispatch2] = useReducer(reducer2, initialState2);
const [state3, dispatch3] = useReducer(reducer3, initialState3);
에듀서 써본 사람 있어요?이것은 모든 감축기를 관리하는 형식의 악몽이 되었다. 이 예만 12개의 다른 이름 변수를 사용한다.실행하려는 코드가 많을수록 필요한 명칭이 커집니다.
다음 터무니없는 것은 React의 배경...
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}
MobX로 넘어가자...
class ObservableTodoStore {
@observable todos = [];
@observable pendingRequests = 0;
constructor() {
mobx.autorun(() => console.log(this.report));
}
@computed get completedTodosCount() {
return this.todos.filter(
todo => todo.completed === true
).length;
}
}
const observableTodoStore = new ObservableTodoStore();
@observer
class TodoList extends React.Component {
render() {
const store = this.props.store;
return (
<div>
{ store.report }
<ul>
{ store.todos.map(
(todo, idx) => <TodoView todo={ todo } key={ idx } />
) }
</ul>
{ store.pendingRequests > 0 ? <marquee>Loading...</marquee> : null }
<button onClick={ this.onNewTodo }>New Todo</button>
</div>
);
}
onNewTodo = () => {
this.props.store.addTodo(prompt('Enter a new todo:','coffee plz'));
}
}
ReactDOM.render(
<TodoList store={ observableTodoStore } />,
document.getElementById('reactjs-app')
);
그럼에도 불구하고 저는 직접 접근 방법과 데이터의 서비스 성격을 즐겼기 때문에 특별한 포맷을 할 필요가 없습니다.
이 모든 것을 더 잘할 수 있을까?그렇게 지도 모른다, 아마, 아마...나는 주말을 낭비해서 나의 이상적인 설정을 설계했지만, 이것은 한 사람이 쉽게 해결할 수 있는 문제가 아니다.
이것은 내가 으깬 하나의 예이다...
//Run a query against DuckDuckGo API
export async function SearchDuckDuckGo(query) {
let url = 'https://api.duckduckgo.com/?t=flatstoreExample&format=json&q=' + query;
try {
let response = await axios.get(url);
let results = ReduceResults(response); //grabs only the results
flatstore.set("ddg", response.data);
flatstore.set("ddgQuery", query);
flatstore.set("ddgResults", results);
flatstore.set("ddgResultCount", results.length);
flatstore.set("ddgError", false);
}
catch (error) {
console.log(error);
flatstore.set("ddgError", error);
}
}
좋아, 좋아, 네가 바로 그 사람이야, 지금 보여주는 게 어때?응, 주말에 바이올린을 켜고 생각해 봤는데 이런 생각이 들었어...
class SearchStatus extends React.Component {
render() {
if (this.props.ddgError)
return (
<div style={{ color: '#f00' }}>
{this.props.ddgError.message}
</div>
);
return (
<div>
<i>
Searched {this.props.ddgQuery}
with {this.props.ddgResultCount || 0} results.
</i>
</div>
);
}
}
export default flatstore.connect(['ddgQuery', 'ddgResultCount', 'ddgError'])(SearchStatus);
이 방면에서 나는 그것을 훔쳤다.그러나 우리는 특정한 데이터 포인트만 필요로 하기 때문에 왜 사용자가 우리가 필요로 하는 키를 직접 지정하는 것을 허락하지 않고 자기 주장을 빙자할 필요가 없습니까?
나는 감정을 억제할 수 없어서, 나는 어쩔 수 없이 더욱 진일보했다.현실 세계의 응용 프로그램은 곧 복잡해질 것이다. 모든 업무 수요는 당신의 3~4단계에서 나온다.우리는 동적 제어가 필요하기 때문에, 우리는 다시 레드ux의connect-prop 맵에서 영감을 얻는다.
class TodoResult extends React.Component {
render() {
return (
<div className={this.props.completed ? "completed" : ""}
onClick={() => { todoToggleComplete(this.props.id) }}>
<span className="result-title">{this.props.desc}</span> -
<span className="result-date">{this.props.dateCreated}</span>
</div >
);
}
}
let onCustomWatched = (ownProps) => {
return ['todos-' + ownProps.id];
}
let onCustomProps = (key, value, store, ownProps) => {
return {
...value
}
}
export default flatstore.connect([], onCustomWatched, onCustomProps)(TodoResult);
나는 React를 가르치는 데 많은 시간을 들였기 때문에 내가 본 대부분의 내용은 신입 개발자들을 곤혹스럽게 했다.최신 프레임워크에서 사용되는 현대 자바스크립트 문법의 복잡성 때문에 React의 인코딩에는 많은 오해가 존재한다.그것은 아주 적게 이루어졌고, 코드와 파일이 너무 많았다.
나는 나의 원형flatstore의 결과에 매우 만족하지만, 현실 세계에서 거의 가용성이 없기 때문에 이것은 나의 또 다른 새로운 프로젝트가GitHub에서 발효될 것이다.
동시에, 나는 너희들 중 한 날이 프로그래밍을 간단하게 되돌릴 수 있기를 바란다.
Reference
이 문제에 관하여(반응왜 이렇게 복잡해...?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joetex/react-why-so-complicated-3dc7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
