react.js 學(xué)習(xí)
Every component is required to have a render method. The reason for that is render is essentially the template for our component.
ReactDOM.render takes in two arguments. The first argument is the component you want to render, the second argument is the DOM node where you want to render the component. (Notice we’re using ReactDOM.render and not React.render. This was a change made in React .14 to make React more modular. It makes sense when you think that React can render to more things than just a DOM element)
Notice all that happened was we made a new array and added <li> </li> to each item in the original array. What’s great about map is it fits perfectly into React (and it’s built into JavaScript). So in our child component above, we’re mapping over names, wrapping each name in a pair of <li> tags, and saving that to our listItems variable. Then, our render method returns an unordered list with all of our friends.
Notice .slice is also a pure function. Given the same arguments, it will always return the same value. It's predictable.
.splice is not a pure function since each time we invoke it passing in the same arguments, we get a different result. It's also modifying state.
新建一個(gè)webpack 項(xiàng)目
- 首先安裝所需要的 react 和react-dom //
npm install --save react react-dom -
npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-core babel-loader babel-preset-react//安裝所需依賴
所以 React 實(shí)現(xiàn)了一個(gè)Virtual DOM似忧，組件 DOM 結(jié)構(gòu)就是映射到這個(gè) Virtual DOM 上酵镜，React 在這個(gè) Virtual DOM 上實(shí)現(xiàn)了一個(gè) diff 算法，當(dāng)要重新渲染組件的時(shí)候，會通過 diff 尋找到要變更的 DOM 節(jié)點(diǎn)宫莱，再把這個(gè)修改更新到瀏覽器實(shí)際的 DOM 節(jié)點(diǎn)上扔茅，所以實(shí)際上不是真的渲染整個(gè) DOM 樹赡勘。
React 調(diào)用生命周期．
componentWillMount: render() 之前調(diào)用从橘，可以改變setState;
componentDidMount: 掛載完成后調(diào)用，調(diào)用一次
