技术代码:React

1{
2    "tagName": "div",
3    "attrs": {
4        "styles": {
5            "fontSize": "20px"
6        }
7    },
8    "children": [
9        {
10            "tagName": "span",
11            "children": ["hello,world"]
12        }
13    ]
14}
参考地址:react和react-dom是什么?
1/*用PhantomJS创建并运行测试程序*/
2grunt test
3/*在你的浏览器上创建运行*/
4grunt test --debug
5/*你可以运行一个程序的时候加上'--filter'获得更快的速度。*/
6grunt fasttest --filter=ReactIdentity
7/*用ESLint保证高质量代码*/
8grunt lint
9/*销毁创建的目录*/
10grunt clean
参考地址:React初学者教程(说明文档)--中文翻译
1import React, { Component } from 'react';
2import ReactDOM from 'react-dom';
3
4class App extends Component {
5 
6  render() {
7    return (
8      <div className="App">
9        这里是app
10      </div>
11    );
12  }
13}
14
15class Info extends Comment{
16    render(){
17        return (
18            <div>
19                info
20            </div>
21        )
22    }
23}
24
25class Ele extends Comment{
26    render(){
27        return (
28            <div>
29                ele
30            </div>
31        )
32    }
33}
34var myProps ={
35
36};
37var ele = React.createElement(Ele,myProps);
38
39
40
41ReactDOM.render(<App>
42    <Info></Info>
43    {ele}
44</App>,document.getElementById('root'));
参考地址:React.createClass 、React.createElement、Component
1const IngredirentsList = React.createClass({
2    displayName: 'IngredirentsList',
3    render () {
4        return React.createElement('ul', {className: 'ingredients'},
5            this.props.items.map((ingredient, i) =>
6                React.createElement('li', {key: i}, ingredient);)
7        )
8    }
9});
10ReactDOM.render(
11    React.createElement(IngredirentsList, {items}, null),  items是一个包含原料的数组
12    document.getElementById('target')
13)
14复制代码
参考地址:React学习手册-React运行机制笔记(二)
1{
2  "name": "kiwi-react",
3  "version": "0.0.1",
4  "description": "this is my react first demo",
5  "main": "bundle.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "keywords": [
10    "react"
11  ],
12  "author": "kiwizhang",
13  "license": "ISC",
14  "devDependencies": {
15    "babelify": "^7.2.0",
16    "browserify": "^12.0.1",
17    "gulp": "^3.9.0",
18    "reactify": "^1.1.1",
19    "vinyl-source-stream": "^1.1.0"
20  },
21  "dependencies": {
22    "react": "^0.14.5",
23    "react-dom": "^0.14.5"
24  }
25}
参考地址:react(1)-broswerify+reactify+gulp搭建react的workflow+React入门资料集合
1import React, { Component, PropTypes } from 'react';
2import { Popover, Icon } from 'antd';
3
4class InputControlES6 extends React.Component{
5	constructor(pros){//初始化的工作放入到构造函数
6		super(pros);
7		this.state = {//初始state设置方式
8			visible:false,
9			text:props.initialValue || '默认值'
10		};
11
12		// ES6 类中函数必须手动绑定
13        this.handleChange = this.handleChange.bind(this);
14	}
15	hide(){//因为是类,所以属性和方法之间不必添加都好
16		this.setState({
17			visible:false,
18		});
19	}
20	handleVisibleChange(visible){
21		this.setState({
22			visible
23		})
24	}
25	handleChange(event) {
26        this.setState({
27            text: event.target.value
28        });
29    }
30	render(){
31		const { dataurl } = this.props;
32		return (
33			<div>
34                Type something:
35                <input onChange={this.handleChange}
36               value={this.state.text} />
37            </div>
38		)
39	}
40}
41
42InputControlES6.propTypes = {
43    initialValue: React.PropTypes.string
44};
45InputControlES6.defaultProps = {
46    initialValue: ''
47};
参考地址:react component 的创建方式
1初始化阶段
2  constructor 构造函数
3  getDefaultProps props默认值
4  getInitialState state默认值
5挂载阶段
6  staticgetDerivedStateFromProps(props,state)
7  render
8  componentDidMount
9  getDerivedStateFromProps:组件每次被 rerender的时候,包括在组件构建之后(虚拟 dom之后,实际 dom挂载之前),每次获取新的 props或 state之后;每次接收新的props之后都会返回一个对象作为新的 state,返回null则说明不需要更新 state;配合 componentDidUpdate,可以覆盖 componentWillReceiveProps的所有用法
10更新阶段
11  staticgetDerivedStateFromProps(props,state)
12  shouldComponentUpdate
13  render
14  getSnapshotBeforeUpdate(prevProps,prevState)
15  componentDidUpdate
16  getSnapshotBeforeUpdate:触发时间: update发生的时候,在 render之后,在组件 dom渲染之前;返回一个值,作为 componentDidUpdate的第三个参数;配合 componentDidUpdate, 可以覆盖 componentWillUpdate的所有用法
17卸载阶段
18  componentWillUnmount
19错误处理
20  componentDidCatch
21  React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps,componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。
22
23React16并没有删除这三个钩子函数,但是不能和新增的钩子函数混用, React17将会删除这三个钩子函数,新增了对错误的处理( componentDidCatch)
参考地址:react面试题
1var React = require('react');
2var Counter = require('../components/MyCounter');
3var createStore = require('redux').createStore;
4
5
6var counter = function(state, action) {
7    switch (action.type) {
8        case 'PLUS': 
9            return state + action.value;
10        case 'MINUS': 
11            return state - action.value;
12        default: 
13            return state;
14    }
15};
16
17var store = createStore(counter, 1000);
18var CounterContainer = React.createClass({
19    plus: function() {
20        var nextState = store.dispatch({
21            type: "PLUS",
22            value: 2
23        });
24        this.setState(nextState);
25    },
26    minus: function() {
27        var nextState = store.dispatch({
28            type: "MINUS",
29            value: 2
30        });
31        this.setState(nextState);
32    },
33    render: function() {
34        return (
35            <Counter plus={this.plus} 
36                     minus={this.minus}
37                     value={store.getState()} />
38        );
39    }
40});
41
42module.exports = CounterContainer;
参考地址:React从零学起
1import {createSelector} from 'reselect';
2import {FilterTypes} from './constants.js';
3
4export const selectVisibleTodos=createSelector(
5[getFilter,getTodos],
6(filter,todos)=>{
7    switch(filter){
8        case FilterTypes.ALL:
9            return todos;
10        case FilterTypes.COMPLETED:
11            return todos.filter(item=>item.completed);
12        case FilterTypes.UNCOMPLETED:
13            return todos.filter(item=>!item.completed);
14        default:
15            throw new Error('unsupported filter')
16    }
17}
18)
参考地址:深入浅出React之第五章:React组件的性能优化
1// Dynamically injected
2var textComponentClass = null;
3
4// Relies on dynamically injected value
5function createInstanceForText(text) {
6  return new textComponentClass(text);
7}
8
9var ReactHostComponent = {
10  createInstanceForText,
11
12  // 提供一个动态注入
13  injection: {
14    injectTextComponentClass: function(componentClass) {
15      textComponentClass = componentClass;
16    },
17  },
18};
19
20module.exports = ReactHostComponent;
参考地址:React学习之相关代码库(三十六)

代码交流 2021