JSX就是Javascript和XML结合的一种格式，要使用须要在babelrc里配置, Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用react
// 最外层必须有一个元素包裹
<div>hello world!</div>
// 属性都要驼峰
<div className="haha" ></div>
// 样式
<div style={{ marginTop: '10px'}}></div>
// 变量
<div> {user.name }</div>
// 事件
<button onClick={}> click me </button>
// 遍历
<ul>
{
list.map(
({name, value}) => <li key={name} value={value}>{name}</li>
)
}
</ul>
// 展开对象
const props = {name: "tom" }
<div {...props}></div>
a. 虚拟DOM（Virtual DOM）机制：对于每个组件，React会在内存中构建一个相对应的DOM树，基于React开发时全部的DOM构造都是经过虚拟DOM进行，每当组件的状态发生变化时，React都会从新构建整个DOM数据，而后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，而后将这些Patchs 再更新到真实DOM中
b. 两个不一样类型的元素会产生不一样的树(根元素不一样结构树必定不一样)
c. 开发者能够经过key属性指定不一样树中没有发生改变的子元素
d. diff算法的核心就是同级比较android
// 默认参数
Main.defaultProps = {
list: [ ]
}
// setState 是异步的
this.setState( (prevState,props) => ({
text: prev.text + "-ha"
}))
Note: 父子组件的挂载顺序，更新顺序ios
forEach map filter some reduce ,setTimeout setInterval等算法
顾名思义，它没有state，接收props，它是一种只负责展现的纯组件 使用函数式的方式声明，会使得代码的可读性更好，并能大大减小代码量，多写无状态组件编程
function HelloComponent(props) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="marlon" />, mountNode)
7 使用 fragment 碎片
Jsx 要求返回的元素，必须有东西包裹,使用碎片能够减小一层DOM数组
<React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> // 能够简写为 <> <td>Hello</td> <td>World</td> </>
Context 经过组件树提供了一个传递数据的方法，从而避免了在每个层级手动的传递 props 属性，React.createContext 建立一个context，一个context包含provider（数据提供者）, comsumer(数据消费者), Provider 有一个value参数，用来覆盖建立时的默认值babel
// 建立一个 theme Context, 默认 theme 的值为 light
const ThemeContext = React.createContext ('light');
function ThemedButton(props) {
// ThemedButton 组件从 context 接收 theme
return (
<ThemeContext.Consumer>
{theme => <Button {...props} theme={theme} />}
</ThemeContext.Consumer>
);
}
// 中间组件
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
推荐一个react模块的目录结构react-router
/states 状态
/(widgets|components)各种组件、弹窗等
index.js
index.less
service 建议放在config里，全局统一
Computed用于生成计算数据，autorun相似用来监听某一数据改变而做出反映
import {action, observable ,autorun} from 'mobx';
import StateAdd from "./add"
class State {
constructor(){
this.$add = new StateAdd(this);
}
// 显示
@observable show = false;
// query
@observable query = {
trade: null,
type: 1
}
/**
* @name 获取列表
*/
@action getList = () => {
}
}
const instance = new State();
autorun(() => {
if(instance.show){
console.log("打开弹窗了")
}
})
export default instance
主要有两种实现方式属性proxy、继承实现
一般使用装饰器模式调用,常见的有mobx的 @observer, react-router的withRouter等less
------ 属性proxy 实现以下
import React from "react"
export default class extends React.Component {
render = () =>
<div>
<div>
<Hoc1_text name={'Hoc1_text'}/>
</div>
<div>
<Hoc2_text />
</div>
</div>
}
class Text1 extends React.Component {
render = () =>
<div>
this is simple text <br/>
{this.props.name}
</div>
}
/**
* @name 操做props
*/
function Hoc1(Component){
return class extends React.Component {
render = () =>
<div className='hoc1'>
<Component {...Object.assign({} , this.props, {gen : '111'})}/>
</div>
}
}
const Hoc1_text = Hoc1(Text1);
class Text2 extends React.Component {
render = () =>
<div>
<input type="text" value={this.props.value} onChange={this.props.change}/>
</div>
}
/**
*@name 抽离state
*/
function Hoc2(Component){
return class extends React.Component {
state = {
value: '11'
}
change = e => {
this.setState({
value: e.target.value
})
}
render = () =>
<div>
<Component value={this.state.value} change={this.change}/>
</div>
}
}
const Hoc2_text = Hoc2(Text2);
function Hoc3(Component){
return class extends React.Component {
getRef = _ref => {
this.refs = _ref;
}
render = () =>
<div>
<Component ref={this.getRef}/>
</div>
}
}
------ 继承组件 实现以下 -------
class Text extends React.Component {
render(){
return (
<div>
this is text
</div>
)
}
}
// 生命周期能够覆盖掉
const hoc2 = Component => {
return class NewHoc extends Component {
static displayName = `NewHoc-${Component.displayName || Component.name}`
render(){
const element= super.render();
console.log(element)
const style = {
color: element.type === 'div' ? 'red' : 'green'
}
const newProps = {...this.props, style}
return React.cloneElement(element, newProps, element.props.children)
}
}
}
const NewCom = hoc2(Text)