Comparative 1, the front end of the large frame 3
2, React basic introduction
Virtual dom
diff difference comparison algorithm ---
3, built react development environment
npx create-react-app my-app
cd my-app
npm start
React defined components
Embodiment 1: ----- This constructor creates a component assembly is stateless
Mode 2: class ----- es6 new syntax
Creating a component with a class ---- --- Mode 2 use components created inherit React component approach is to define private data by the internal state of the component, the component
4, React modular in css
Created by out of create-react-app items, we must first find the configuration file in which the file default path is: \ node_modules \ REACT-scripts \ config \ webpack.config.js , and then find the following code to add a parameter modules: true on it:
5, the life cycle of components
6, using the components
Set Default
Set defaults check type
Lifecycle functions --- Note the order of execution lifecycle functions (also decided to re-write assembly location, such as not to render componentWillMount written on the back of a)
Component creates phases: the first componentWillMount (get them in this function data and methods, objects get dom)
Component Creation Phase: The second render function ---- virtual memory will be created dom, when not to go to the page rendering
Components to create the final stage of the implementation of a function: componentDidMount
组件运行阶段：这里的5个生命周期函数触发是由条件的，必须是props属性改变或者状态state发生改变才会触发，否则执行次数时0
props里的属性是只读的（这点也和vue一样），所以我们通过改变state里面的值触发
第一个：componentWillReceiveProps----
注意：以上的原生dom事件不推荐----和vue一样，不推荐操作dom
所以使用react提供的事件绑定机制---onClick （注意：原生的是 onclick vue的是@click）
jsx语法注意事项： jsx时，在标签中要使用js时要用{}包起来
第二个 shouldComponentUpdate
第3个 componentWillUpdate
组件运行阶段的：render函数----第4个函数
组件运行阶段的最后一个函数: componentDidUpdate
组件销毁阶段的函数： componentWillUnmount
7、react中绑定this并传参的方法
方式1: 利用bind 修改this指向
方式2: 在构造函数中绑定并传参---注意bind不是在调用函数
方式3：箭头函数（箭头函数的内部this和外部this指向是一样的，所以说箭头函数this指向时在函数定义时决定的，而不同于我们之前学的谁调用了那个方法this就指向谁）
函数调用时要传参时可如上写箭头函数，一举两得；
若函数调用不需要传参的话，
那就可以在定义函数时写箭头函数
onClick = {this.changeMsg3}
changeMsg3= () => {//此时this指向组件了
}
8、react如何把页面数据更新到数据中------react中是单向绑定，支持数据到页面的自动刷新（必须用setState方法），但是不支持页面到数据的同步，想要同步要自己在事件函数中设置下
9、评论列表组件案例
10、当组件嵌套比较多层时，子组件想拿到父组件的值时若是一层层传递和获取的话会比较麻烦，这是可以利用context 来取父传过来的值
用法：
