A React gyermek komponens kényszerfrissítése: az egyszerű módszer

Megjegyzés: A 16. reakció óta componentWillReceiveProps()elavult, vagyis ha ezt a verziót használja, akkor ez nem jó tanács az Ön számára.

A React világban rosszallják az újrarendezés kényszerítését. Engedje meg, hogy a DOM vigyázzon magára, amikor a React észleli a statevagy a változásokat props. E minták követése érdekében néha olyan dolgokat kell végeznünk, amelyek kissé butának tűnnek. Vegye figyelembe ezt a forgatókönyvet:

Két komponensünk van - egy szülő és egy gyermek. A szülő API-hívást kezdeményez a user. Attól, hogy megkapjuk a dolgok, mint name, age, favorite color. Az idadatbázisunkból is kapunk egy . Ezt továbbítjuk gyermek-összetevőnknek, amely szintén API-hívást fog kezdeményezni, a felhasználói azonosítóval. Félelmetes - rengeteg adat érkezik az alkalmazásunkba.

Tegyük fel, hogy tároljuk a cipők listáját az adatbázisban. Amikor a felhasználó megváltoztatja színpreferenciáját, a szerver új adatokat ír be a felhasználó cipőlistájába. Nagy! Kivéve, hogy az új cipőlistát nem látjuk gyermek komponensünkben. Mi ad?

Mellékjegyzet : Természetesen meg kell szereznünk a cipőt a hívásból a felhasználó számára - ez csak egy egyszerűsített magyarázat.

Reagáljon az újrarendelés alapjaira

Rövid, hogy a React csak a DOM azon részeit fogja frissíteni, amelyek megváltoztak. Ebben az esetben az propsátadjuk a cipő alkatrésznek ( userId) nem változtak, ezért a gyermek komponensünkben semmi sem változik.

A felhasználó színpreferenciája frissül, amikor új információkat kapunk az API-tól - feltételezve, hogy a felhasználó frissítése után valamit csinálunk a válaszsal.

De mivel a React nem lát okot a cipőlista frissítésére, ez nem is történik - annak ellenére, hogy a szerverünkön a cipők már mások.

A kezdő kód

const UserShow extends Component { state = { user: {} } componentDidMount() { this.fetchUser().then(this.refreshUser) } setNewColor = color => { this.updateUser({color}).then(this.refreshUser) } refreshUser = res => this.setState({user: res.data.user}) render() { const { user } = this.state; return ( User name: {user.name} Pick color: {colors.map(color => this.setNewColor(color)} />)} )} ) } }

A ShoeListcsak fog egy listát cipő, amit hozom a szerver a felhasználó id:

const ShoeList extends Component { state = { shoes: [] } componentDidMount() { this.fetchShoes(this.props.id) .then(this.refreshShoeList) } refreshShoeList = res => this.setState({ shoes: res.data.shoes }) render() { // some list of shoes } }

Ha azt akarjuk, hogy a cipő alkatrésze megragadja az új cipők listáját, frissítenünk kell a neki küldött kellékeket. Ellenkező esetben nem szükséges frissíteni.

Valójában, ahogy ez meg van írva, az ShoeListsoha nem frissül, mivel a rendereléshez nem függünk a kellékektől. Javítsuk ki.

A gyermekkomponens újbóli megjelenítésének elindítása

A gyermekkomponens újrarendelésre kényszerítésére - és új API-hívás kezdeményezésére - át kell adnunk egy javaslatot, amely megváltozik, ha a felhasználó színpreferenciája megváltozott.

Ehhez hozzáadunk egy módszert setNewColor:

[...] setNewColor = color => { this.updateUser({color}).then(res => { this.refreshUser(res); this.refreshShoeList(); }) } refreshShoeList = () => this.setState({refreshShoeList: !this.state.refreshShoeList}) [...] 

This is a simple switch we can flip. I’ve kept things as simple as possible, but in production we’d want to make sure that the color we’re setting is different than the color we had before. Otherwise, there will be nothing to update.

Now in the ShoeList:

componentWillReceiveProps(props) { const { refresh, id } = this.props; if (props.refresh !== refresh) { this.fetchShoes(id) .then(this.refreshShoeList) } }

If you pass only refreshShoeList and then toggle based on that boolean, the component will just update forever and ever and ever.

We need to make sure the switch has flipped only once — so we’ll just check that the props coming in are different than the props we had before. If they are different, we’ll make a new API call to get the new list of shoes.

And boom — our child component has been “forced” to update.

componentWillReceiveProps

It’s worth taking just one more minute to review what’s going on in that last piece of code. In componentWillReceiveProps we have our only opportunity to view new props as they are coming in and compare them with previous props.

Here we can detect changes (like in refresh) and we can also make checks for new props (note, for instance, that refresh is initially undefined).

This React method is a very powerful way to manipulate and examine props.

Original text