react学习笔记

1、2013年5月开源

2、相比vue更灵活，react适用于复杂度更高的项目

3、react里的jsx语法

　　jsx中，使用自己创建的组件，用标签的形式，组件必须以大写字母开头

4、用 React 的 Fragment 标签替换最外层的div，隐藏最外层的div

5、组件的状态： constructor中的this.state

　改变state的数据： this.setState

6、展开运算符：...

7、 immutable  state 不允许我们做任何的改变

8、注释： {/* 这是注释 */}

　　{

　　　　//单行注释，必须换行

　　}

9、不转义字符串的内容：dangerouslySetInnerHTML={{__html: item}}

10、标签的class => className,   label的 for => htmlFor

11、父组件用属性的方式传值给子组件，子组件通过this.props来接收父组件传过来的值，方法也是，传递是要bind父组件的this

12、在  constructor 中，this.handleClick = this.handleClick.bind(this); 可优化性能。

13、this.setState里可以用函数 () => { return '' }     () => ({ }) 提高性能

14、声明式开发、可以与其他框架并存、组件化、单项数据流（父组件传值给子组件，但子组件不能修改父组件传递的值，只能使用）、视图层框架、函数式编程

15、谷歌的react developer tools

16、PropTypes: 验证传递数据props的类型： PropType.string.isRequired  （传空，是string类型）arrayOf  oneOfType

17、defaultProps: 设置props值的默认值

18、当组件的state或props发生改变时，render函数会重新执行。

　　当父组件的render被执行时，子组件的render也会重新执行一次。

19、虚拟DOM就是一个JS对象，用它来描述真实DOM (有3个参数， [标签，属性，内容])

　　 ['div', {id: 'abc}, ['span', {}, 'hello world']]    =>  <div id="abc"><span>hello world</span></div>

　　

 

 

20、React.createElement('div', {}, 'item);

　　JSX -> createElement -> 虚拟DOM（JS对象） -> 真实的DOM

21、Diff 算法：同层比对

22、ref={ (input) => {this.input = input}}      //input的ref

　　let value = this.input.value    //尽量少用ref

23、this.setState 是异步函数，setState执行后的程序放在方法的第二个函数里，第二个函数也是一个() => {}

24、声明周期函数： 在某一时刻组件会自动调用执行的函数

　　componentWillMount: 在组件即将被挂载到页面的时刻自动执行

　　render：页面挂载

　　componentDidMount：在组件被挂载到页面之后自动执行

　　shouldComponentUpdate：组件被更新之前，会自动执行，返回Boolean， false则不会更新 （提升性能）

　　componentWillUpdate：组件被更新之前会自动执行，在shouldComponentUpdate之后执行，如果shouldComponentUpdate返回true才执行，返回false就不执行了。

　　render：重新渲染

　　componentDidUpdate：组件更新完成后，自动执行

　　componentWillReceiveProps：当一个组件从父组件接收了参数，只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行

　　　　　　　　　　　　　　　　（这个组件第一次存在于父组件中不会被执行，如果这个组件之前已经存在于父组件中才会执行）

　　componentWillUnmount：组件被从页面中移除时，自动执行

　　

 

 

25、Charles 

26、react-transition-group  CSSTransition

27、redux = reducer + flux

28、store.js　

import { createStore } from 'redux';
import reducer from './reducer';

let store = createStore(reducer);
export default store;

reducer.js

let defaultState = {
    inputValue: 'today',
    list: ['1', '2', '3'],
};

export default (state = defaultState, action) => {
    return state;
}
组件中获取数据：

this.state = store.getState();

 

 

 

29、redux devtools

30、reducer 可以接收state，但是绝不能修改state

31、redux原则：

　　1）store 是唯一的

　　2）只有store能改变自己的内容（reducer不能改变state的内容）

　　3）reducer 必须是纯函数（给定固定的输入，就一定有固定的输出，而且不会有任何副作用）

　　4）函数：createStore(创建store)   store.dispatch(传递action)  store.getState(获取state)  store.subscribe(监测state)

32、UI组件：只管页面

　　容器组件：数据操作

　　无状态组件：组件里只有render函数时，用无状态组件替换普通组件。

33、redux-thunk： 是redux的中间件（action 和 store之间）,使用后，action不仅可以是对象，还可以是函数

　　功能： 把ajax异步处理放在actionCreatod.js 中

　　redux-thunk 对 store 的 dispatch 方法进行升级，当dispatch接收的是对象时，就传给store， 当dispatch接收的是函数时，就先执行函数

34、redux-sage： 可以代替 redux-thunk

35、react-redux

　　1) Provider 提供store

　　2）connect 让TodoList 和 store 连接 export default connect(null, null)(TodoList);