react.js 学习

react.js 学习

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.

---

新建一个webpack 项目

1. 首先安装所需要的　react 和react-dom //　npm install --save react react-dom
2. npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-core babel-loader babel-preset-react //安装所需依赖

所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。

React 调用生命周期．
componentWillMount: render() 之前调用，可以改变setState;
componentDidMount: 挂载完成后调用，调用一次