React - kwestia stylu - co może a co nie powinno być w bloku render

Cześc, chodzi mi o kwestię może bardziej stylu niż meritum.

Zakładając, że dla działania kodu jest to bez znaczenia, czy w bloku render należy operować na state i props (oczywiście nie próbując zmieniać props) czy też na samym początku należałoby to przepisać na lokalne zmienne bloku render?

Słyszałam, że są jakieś wytyczne - ze względu na czystość kodu - w tej kwestii ale nie potrafię tego znaleźć.

Doctanna napisał(a):

Cześc, chodzi mi o kwestię może bardziej stylu niż meritum.

Zakładając, że dla działania kodu jest to bez znaczenia, czy w bloku render należy operować na state i props (oczywiście nie próbując zmieniać props) czy też na samym początku należałoby to przepisać na lokalne zmienne bloku render?

Słyszałam, że są jakieś wytyczne - ze względu na czystość kodu - w tej kwestii ale nie potrafię tego znaleźć.

Ja tam wole sobie przypisywać do zmiennych na samym początku wykonywania render(). W sensie coś takiego:

const { visibility } = this.state

Tak samo z propsami.
Tak jest czyściej według mnie.

Czyściej, krócej (bo nie trzeba powtarzać ciągle this.props.foo tylko piszesz albo props.foo albo wręcz foo) oraz łatwiej refaktoryzować.

czy w bloku render

to jest funkcja render, a nie blok ;)

Zakładając, że dla działania kodu jest to bez znaczenia, czy w bloku render należy
operować na state i props (oczywiście nie próbując zmieniać props)
czy też na samym początku należałoby to przepisać na lokalne zmienne bloku render?

Przepisanie propsów:

const props = this.props;

albo z destrukturingiem

const { foo, bar } = this.props

ma tę zaletę, że jeśli będzie potrzeba zamienić komponent klasowy na funkcyjny, to zrobisz to bardzo łatwo:
z...:

class MyComponent extends Component {
   ....
   render() {
       const { foo, bar } = this.props;
       return <div>
                <div>{ foo.a } - { foo.b}</div>
                <div>{ foo.c } - { foo.d}</div>
        </div>
   }
}

function MyComponent({ foo, bar }) {
        // wszystko to, co nizej pozostaje niezmienione:
       return <div>
                <div>{ foo.a } - { foo.b}</div>
                <div>{ foo.c } - { foo.d}</div>
        </div>
}

czyli jeśli nie odwołujesz się do this, i jego właściwości (w tym props) to masz łatwiej potem przy refaktorze.

Podobnie można zrobić ze state, jak już @sintloer wspomniał.

handlery eventów też można przypisać na początku.

Najbardziej elegancko wygląda wg mnie, jeśli to całe JSX w render w ogóle nie ma świadomości istnienia this (co nie znaczy, że zawsze tak robię, bo zdarza mi się wrzucać this.props do JSX - jednak nie uważam to za zbyt elegancki kod).