react基础

基本语法
- ReactDOM.render():渲染虚拟dom,注意大小写
- map方法生成列表arr .map(function(value){})
- 可以直接插入变量
```
var arr = [
  Hello world!,
  React is awesome,
];
ReactDOM.render(
  {arr},
  document.getElementById('example')
);
```
- 处理子节点:``React.Children.map,获取子节点this.props.children`
- 通过propTypes定义属性类型React.PropTypes.string.isRequired ,定义初始属性:
```
getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
```
- 获取真实节点this.refs.name
- 初始化state getInitialState
- 组件的生命周期,前三个周期都有两种状态will did
  - Mounting: 载入
  - Updating:正在被重新渲染
  - Unmounting:已移除真实DOM
  - componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  - shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
    
    component-lifecycle

  `
 class App extends React.Component {
 // Mounting:
 componentWillMount() {
   // 1. 這是第一次 render 前，更新 state 的最後機會：
   this.setState({ ageText: this.props.age + '歲' });
 }

 // Mounting:
 componentDidMount() {
   // 1. 如果你要操作實際的 DOM 元素：
   $('#app').hide();

   // 2. 如果你要請求 AJAX，或是設置 timer：
   $.ajax({ ... });
 }

 // Updating:
 componentWillReceiveProps(nextProps) {
   // 1. 如果你要根據新的 props 做一些運算：
   this.setState({ ageText: nextProps.age + '歲' });
 }

 // Updating:
 shouldComponentUpdate(nextProps, nextState) {
   // 1. 如果你想調校元件效能，不想要做沒有意義的 re-render，
   //    如下方只有在 id 不相同的情況下再 render 的話：
   return nextProps.id !== this.props.id;
 }

 // Updating:
 componentWillUpdate(nextProps, nextState) {
   // 1. 這是第 N 次 render 前，最後被調用的方法，
   //    通常可以拿來做 log
 }

 // Updating:
 componentDidUpdate(prevProps, prevState) {
   // 1. 如果你要操作更新後實際的 DOM 元素：
   $('#app').hide();
 }

 // Unmounting:
 componentWillUnmount() {
   // 1. 如果該元件消滅，也需要移除不必要的 AJAX 請求的話：
   xhr.abort();

   // 2. 如果你要移除不必要的傾聽事件：
   store.removeChangeListener(...);
 }
 }

react建立组件的三种方式

使用es6的类

class TodoList extends React.Component{
  render(){
    
  }
}

使用createClass

const TodoList = React.createClass({
  render(){
    return (todolist)
  }
})

使用无状态函数

const TodoList = function(){
  return todoapp
}

通过属性props传递参数给子组件{title,name,...rest}=this.props ,还可以这样添加属性

const props = {
  name:'nico',
  age:18
}
render(){
  return 
}
//使用function时时通过参数获得的
function Todo(props){
  
}
const Todo=(props)=>()
const Todo =({name,age})=>()

//相关知识点
//组合对象
const firstName = 'Jason';
const lastName = 'Chung';
const others = {
  sex: 'male',
  age: 27
};
const user = {firstName,lastname,...others}

防止类型错误,可以给组件设置属性类型

Todo.propTypes={
  title:React.PropTypes.string,
  age:React.PropTypes.number
}

动态添加列表

render(){
  
  {this.props.todos.map((todo)=>{
    {todo.name}
  })}
  
}

过滤器filter

arr.filter((state)=>{
  return number>9
})

css module
- :local 为局部变量,默认
- :global 全局变量
- 组合class composes:classname
this.props.children 表示组件所有的子节点

fetch获取数据

fetch('./todos.json')                         // 1. 使用 fetch 回傳的是 promise 物件
    .then((response) => response.json())        // 2. 解析 response 資料，將它轉成 js 物件
    .then((todos) => this.setState({ todos })); // 3. 更新元件 state

//使用方法
const promise = new Promise((resolve, reject) => {
  // resolve 用來傳遞非同步的成功結果，例如：AJAX 最後取得的資料或一秒後定義的值
  // reject 用來傳遞非同步的錯誤結果
  setTimeout(() => resolve('async'), 1000);
});

promise
  .then((res) => console.log(res))   // 透過 promise.then 可以先定義非同步成功後，要執行什麼
  .catch((err) => console.log(err)); // 透過 promise.catch 可以先定義非同步錯誤後，要執行什麼

相关api:

const url = '/login';
const options = {
  method: 'POST',
  headers: {}
};

fetch(url, options)           // 使用 fetch 調用 AJAX 回傳 promise 物件
  .then((res) => res.json());

redux流程

img

let listeners = []
// 1. Redux 中只會有一個狀態樹，統一存放所有業務資料
let state

// 2. 每當使用者觸發事件，調用 store.dispatch(action)
function dispatch(action) {
  // 3. 根據 reducer 取得最新的狀態
  state = reducer(state, action)
  // 4. 通知所有傾聽器 store 的狀態已改變
  listeners.slice().forEach(l => l())
}

// 5. 當 view 知道 Store 狀態改變，呼叫 getter API 取得最新狀態
function getState() {
  return state
}

// 6. 讓 view 註冊狀態改變的傾聽器
function subscribe(listener) {
  listeners.push(listener)
  // 7. 回傳 unsubscribe 函數
  return () => listeners.filter((l) => l !== listener)
}

注意apply应用

function foo(x, y, z) {}
const args = [1,2,3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

generator

app.model({
  namespace:'todos',
  effects:{
    *addRemote({payload:todo},{put,call}){
      yield call(addTodo.todo);
  yield put({type:'add',payload:tod})
    }
  }
})

14.当有多个属性时classnames
import classnames from 'classnames'; const App = (props) => { const cls = classnames({ btn: true, btnLarge: props.type === 'submit', btnSmall: props.type === 'edit', }); return

; }

dva的model

  app.model({
  namespace: 'todos',
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      return state.concat(todo);
    },
    remove(state, { payload: id }) {
      return state.filter(todo => todo.id !== id);
    },
    update(state, { payload: updatedTodo }) {
      return state.map(todo => {
        if (todo.id === updatedTodo.id) {
          return { ...todo, ...updatedTodo };
        } else {
          return todo;
        }
      });
    },
  },
  };

dva的简单使用

使用dva-cli:

生成路由:dva g route routerName

生成model:dva g model modelName

react基础

Hello world!

React is awesome

dva的简单使用

你可能感兴趣的:(react基础)