- 组件可变的是通过
state属性改变 - 在组件生成之后的生命周期
props是不可变的部分 - 组件的编写可以采用
class Xxx extends Component - 组件需要有
render()方法，返回js的dom（返回结构可以使用jsx编写） - 单项数据流，如图所示
-
关于组件方法，需要在构造函数内进行
bind(this)或在构造函数内编写组件方法（不推荐），或者使用箭头函数 -
组件的创建有三种方式，通过class类继承方式，函数方式（无状态组件），React.createClass方式（已经不推荐了）
-
关于表单的控件，需要通过设置value值来使得可变dom部分可控
<input value={this.state.aaa} onChange={this.onChange}> -
拆分组件，如果传参时可以通过props传递state和方法，可以通过children属性进行组件的组合。
<Item>{children}</Item> -
函数式编程的原则(react)：不改变原有的值，通过函数处理，得到新的值
input-> fx ->output
- 组件的生命周期
//组件挂载
constructor()
componentWillMount()
render()
componentDidMount()// 组件挂载时，适合用于异步获取数据等操作
//组件更新
componentWillReceiveProps()
shouldComponentUpdate()//用于性能优化，可以在这里决定是否需要重新渲染
componentWillUpdate()
render()
componentDidUpdate()
componentDidCatch()//异常处理（react 16才有）
- 条件渲染 在组件的jsx中，可以使用js的条件表达式（if-else,&&,||,三目运算符）
...
render() {
return ({result &&
<Table
list={result.hits}
pattern={searchTerm}
onDismiss={this.onDismiss}
/>})
}class ExplainBindingsComponent extends Component {
onClickMe = () => {
console.log(this);
}
render() {
return (
<button
onClick={this.onClickMe}
type="button"
>
Click Me
</button>
);
}
}- 如果当前模块使用了JSX的无状态组件，必须引入
import React from 'react'; - PropTypes 允许你为组件定义测试检查
Button.propTypes = {
onClick: PropTypes.func,
className: PropTypes.string,
children: PropTypes.node,
};
//类型有：
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
// 可以设置必选
Button.propTypes = {
onClick: PropTypes.func.isRequired,
className: PropTypes.string,
children: PropTypes.node.isRequired,
};
- Jest 允许你为组件属性快照测试
- Enzyme 允许你为组件书写单元测试
- 引用DOM元素
1.使用 DOM API（focus事件，媒体播放等）
2.调用命令式 DOM 节点动画
3.与需要 DOM 节点的第三方库集成
- 高阶组件：对已有组件进行封装，并且添加其他的处理逻辑，并返回一个新的组件
const withLoading = (Component) => ({ isLoading, ...rest }) =>
isLoading
? <Loading />
: <Component { ...rest } />
const ButtonWithLoading = withLoading(Button);- setState如果依赖原来的状态，得用函数方式设置
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));const a = 'aa'//不可变
let b = 'bb'// 可变，严格作用返回在作用域内，无法变量提升const a = ()=> 'a'// 如果直接返回，不需要大括号和returnclass A extends B{
}
const user = {
firstname: 'Robin',
lastname: 'Wieruch',
};
const {firstname,lastname} = user;const arr = ['aa','bb']
const [aa,bb] = arrarr = [1,2,3,4];
arr.map(val=>val+1)//对数组处理
arr.filter(val=>val%2 === 0?true:false) //筛选出结果
arr.incudes(3)//数组内是否存在传入的量const userList = ['Robin', 'Andrew', 'Dan'];
const additionalUser = 'Jordan';
const allUsers = [ ...userList, additionalUser ];
const userNames = { firstname: 'Robin', lastname: 'Wieruch' };
const age = 28;
const user = { ...userNames, age };
console.log(user);
const hello = '你好'；
const name = 'Bobby';
const test =`${hello} ${name}!`；模块导出变量和导入变量
const firstname = 'robin';
const lastname = 'wieruch';
export { firstname, lastname };
import { firstname, lastname } from './file1.js';
console.log(firstname);
// output: robin
//导入模块所有的变量
import * as person from './file1.js';
console.log(person.firstname);
// output: robin
//导入加别名
import { firstname as foo } from './file1.js';
console.log(foo);
// output: robin
导出默认变量
const robin = {
firstname: 'robin',
lastname: 'wieruch',
};
export default robin;
import developer from './file1.js';
console.log(developer);
// output: { firstname: 'robin', lastname: 'wieruch' }
- 状态管理 （Redux,MobX）
- 代码结构 （ES Module）
- 连接到数据库和/或认证 (Graphql)
- 测试（e2e,快照测试，单元测试）
- 异步请求 (Graphql)
- 路由 （reate-router）
- 类型检查 （flow,propType）
- Webpack 和 Babel 相关工具（Webpack4的使用）
- React Native
核心**：
单一数据源
State 是只读的
使用纯函数来执行修改
Redux提供了如下功能：
* 存放应用程序状态的容器
* 一种把 action 分发到状态修改器的机制，也就是 reducer 函数
* 监听状态变化的机制
react-loadable: 按需加载组件
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent